0%

Vue3 使用拖拽组件

发表于 更新于 阅读次数： Valine：
本文字数： 1.6k 阅读时长 ≈ 1 分钟

  前端项目中，会遇到一些表格拖拽业务，更改子项的排列顺序等。这里介绍个组件 vuedraggable。vue3框架 使用 4.1.0 版本的vuedraggable。案例实现做组件封装处理，减少代码冗余和提高代码维护。

vuedraggable

安装

1
npm i vuedraggable@4.1.0 --save

子组件

src/components/child.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import draggable from "vuedraggable";
const props = defineProps({
  data: {
    type: Object,
    default() {
      return {};
    },
  },
});

const onMoveCallback = (val) => {
  console.log(val, "move");
};

const fold = (val) => {
  val.isflod = !val.isflod;
};
src/components/child.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<draggable
  :list="props.data.list"
  :animation="100"
  item-key="id"
  class="list-group"
  :forceFallback="true"
  ghost-class="ghost"
  @change="onMoveCallback">
  <template #item="{ element }">
    <div class="items" @click.stop="fold(element)">
      <div class="title">{{ element.label }}</div>
    </div>
  </template>
</draggable>

父组件

src/views/father.vue
1
2
3
4
5
6
7
8
9
10
11
12
import Transfer from "@/components/Transfer/index.vue";

let transferData = ref({
  leftTitle: "选择审核人",
  rightTitle: "审核流程程序",
  list: [
    { label: "张三1", value: "1" },
    { label: "张三2", value: "2" },
    { label: "张三3", value: "3" },
    { label: "张三4", value: "4" },
  ],
});
src/views/father.vue
1
<Transfer :data="transferData" @auditors="getAuditors" @auditor="getAuditor"></Transfer>

效果

效果

赏包辣条吃吧