网站优化

微信小程序制作模板_Vue.Draggable拖拽功用的配置使

作者:admin 发布时间:2021-01-08
Vue.Draggable拖拽功能的配置使用方法       这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下

使用cmd命令在项目根目录下下载安装Vue.Draggable

npm install vuedraggable 

在组件中需要使用的引入

import draggable from 'vuedraggable' 

注册组件

components:{
 draggable

vue的template代码如

 draggable v-model="itemlis"
//开始移动方法
 :move="getdata" 
 @update="datadragEnd"
//参数配置 
 :options="{animation: 60,handle:'.drag-icon'}"
 transition-group 
 el-row v-for="(item,index) in itemlis" :key="item.id" 
 el-col :span="13" 
 div 
 i /i 
 el-checkbox v-model="item.checked" :value="item.id" /el-checkbox span {{}} /span 
 /div 
 /el-col 
 el-col :span="4" 
 div 
 span {{item.time}} /span 
 /div 
 /el-col 
 el-col :span="4" 

el-dropdown-menu slot="dropdown" el-dropdown-item :data-url="item.opUrl.removeUrl" @click.native="moveTo(item,$event)" 移动 /el-dropdown-item el-dropdown-item :data-url="item.opUrl.copyUrl" @click.native="copyTo(item,$event)" 复制 /el-dropdown-item el-dropdown-item @click.native="itemDel(index,$event)" :data-url="item.opUrl.delUrl" 删除 /el-dropdown-item el-dropdown-item :data-url="item.opUrl.exportUrl" 导出 /el-dropdown-item el-dropdown-item :data-url="item.opUrl.editName" @click.native="getEditDialog(item,$event)" 编辑 /el-dropdown-item el-dropdown-item @click.native="getCodeDialog(item,$event)" 查看二维码 /el-dropdown-item /el-dropdown-menu /el-dropdown /div /div /el-col /el-row /transition-group /draggable

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩