经验总结

  1. 首页 > 生活 > >

Vue实现拖拽穿梭框功能四种方式( 三 )

生活百科

四、Awe-dnd指令封装vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等 。
相比及 vuedraggable 来说，awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件 。
安装依赖：
npm install awe-dnd --saveyarn add awe-andmain.js
import VueDND from 'awe-dnd'Vue.use(VueDND)案例：
<template>  <div>    <div class="color-list">      <div        class="color-item"        v-for="color in colors"        v-dragging="{ item: color, list: colors, group: 'color' }"        :key="color.text"      >        {{ color.text }}      </div>    </div>  </div></template><style scoped>/*被拖拽对象的样式*/.item {  padding: 6px;  background-color: #fdfdfd;  border: solid 1px #eee;  margin-bottom: 10px;  cursor: move;}/*选中样式*/.chosen {  border: solid 1px #3089dc !important;}</style><script>export default {  data() {    return {      drag: false,      colors: [        {          text: "Aquamarine",        },        {          text: "Hotpink",        },        {          text: "Gold",        },        {          text: "Crimson",        },        {          text: "Blueviolet",        },        {          text: "Lightblue",        },        {          text: "Cornflowerblue",        },        {          text: "Skyblue",        },        {          text: "Burlywood",        },      ],    };  },  methods: {},};</script>若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！
【Vue实现拖拽穿梭框功能四种方式】

经验总结扩展阅读


上一篇：2023年2月16日理头行吗 2023年2月16日理头吉日一览表

下一篇：宠物王国单机版达克莱伊怎么获得