vue实现图标拖拽框选功能

最新推荐文章于 2025-04-18 17:25:32 发布

weixin_45578530

最新推荐文章于 2025-04-18 17:25:32 发布

阅读量1.1k

点赞数 3

文章标签：大数据 vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45578530/article/details/125847001

版权

此博客展示了Vue中父子组件通信及数据管理的实现。通过`@changePlanData`事件处理函数，父组件`index.vue`接收并更新`PlanTime`子组件的数据。子组件`PlanTime.vue`包含一个可交互的计划时间表，用户可通过点击或拖动选择录像时段，改变数据状态。同时，使用了鼠标监听事件来处理拖拽选择操作，实现了区域选择和数据更新的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

QQ录屏20220718094326

index.vue

<template>
  <plan-time :planData="planData" @changePlanData="changePlanData" />
</template>
<script>
import PlanTime from "@/components/PlanTime";
const pd = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
];
export default {
  components: { PlanTime },
  data() {
    return {
      planData: pd,
    };
  },
  methods: {
    changePlanData(id, fv) {
      this.planData = this.planData.map((v, index) => {
        return index === id ? fv : v;
      });
    },
  },
};
</script>

PlanTime.vue

<template>
  <div class="plans-div" title="" style="user-select: none">
    <span style="color: #8e8b8b; font-style: italic; line-height: 24px">
      录像时段 蓝色表示保留 灰色表示删除 单击选择或取消
      <!--      录像时段  蓝色表示保留 灰色表示删除 单击选择或取消 单击不放滑动可快速选择 单击标题可反选行或列-->
    </span>
    <div class="plans" @mousedown="handleMouseDown">
      <div class="plan-row-header">
        <div class="plan-day plan-header" style="cursor: pointer">
          <i title="点击还原" class="fa fa-refresh"></i>
        </div>
        <div class="plan-hours">
          <!-- <div
            v-for="(item, i)

最低0.47元/天解锁文章