github地址

安装

yarn add vuedraggable

npm i -S vuedraggable

使用方式

通常

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable> import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...

使用过渡transition-group

<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>

使用footer slot

<draggable v-model="myArray" draggable=".item">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="footer" @click="addPeople">Add</button>
</draggable>

使用header slot

<draggable v-model="myArray" draggable=".item'">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="header" @click="addPeople">Add</button>
</draggable>

使用vuex

<draggable v-model='myList'>

computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}

props

value

类型:数组,
必需:否,
默认值:null 通常与内部元素v-for指令引用的数组相同,该组件的首先使用方法,与vuex兼容,也可使用v-model

list

类型:数组,
必需:否,
默认值:null 除了上面的 value prop之外,list是一个要与拖放同步的数组。
主要的区别是list prop是由使用splice方法的draggable组件更新的,而value是不可变的,两者不能一起使用
tag
类型:字符串
默认值:div 可拖动组件创建的元素的HTML节点类型,作为包含插槽的外部元素
还可以将vue组件的名称作为元素传递。在本例中,draggable属性将传递给创建的组件
clone
类型:function
默认值:(original) => { return original;} 当克隆选项为真时,调用源组件上的函数来克隆元素。
惟一的参数是要克隆的viewModel元素,返回的值是它的克隆版本。
在默认情况下vue.draggable重用viewModel元素,所以如果您想克隆或深度克隆它,就必须使用这个钩子。

move

类型:函数

如果不为空,这个函数将以类似于Sortable onMove回调的方式调用。返回false将取消拖动操作

function onMoveCallback(evt, originalEvent){
...
// return false; — for cancel
} <draggable :list="list" :move="checkMove"> checkMove: function(evt){
return (evt.draggedContext.element.name!=='apple');
}

componentData

类型:Object

该props是用于传递额外的信息到子组件

props:要在子组件中传递的props
attrs:要在子组件中传递的attrs
on:要在子组件中订阅的事件 <draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
<el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
<div>{{e.description}}</div>
</el-collapse-item>
</draggable> methods: {
handleChange() {
console.log('changed');
},
inputChanged(value) {
this.activeNames = value;
},
getComponentData() {
return {
on: {
change: this.handleChange,
input: this.inputChanged
},
attrs:{
wrap: true
},
props: {
value: this.activeNames
}
};
}
}

Events

包括start, add, remove, update, end, choose, sort, filter, clone这些事件
当list不为空且相应数组由于拖放操作而更改时,将触发事件 <draggable :list="list" @end="onEnd">

参数属性:

源码分析待续。。。

vuedraggable(vue2.0)组件详解的更多相关文章

  1. vue2.0 watch 详解

    vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对象.Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性. 也就是 ...

  2. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  3. Android消息传递之EventBus 3.0使用详解

    前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...

  4. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  5. Echars 6大公共组件详解

    Echars 六大组件详解 : title  tooltip toolbox legend  dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...

  6. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  7. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  8. Tomcat系列之服务器的安装与配置以及各组件详解

    Tomcat系列之服务器的安装与配置以及各组件详解 大纲 一.前言 二.安装与配置Tomcat 三.Tomcat 目录的结构 四.Tomcat 配置文件 注,本文的测试的操作系统为CentOS 6.4 ...

  9. Logstash组件详解(input、codec、filter、output)

    logstash组件详解 logstash的概念及特点. 概念:logstash是一个数据采集.加工处理以及传输(输出)的工具. 特点: - 所有类型的数据集中处理 - 不同模式和格式数据的正常化 - ...

随机推荐

  1. 访问docker仓库

    仓库(Repositiry)是集中存放镜像的地方,分为公共仓库和私有仓库.一个容易与之混淆的概念是注册服务器(Registry).实际上注册服务器是存放仓库的具体服务器,一个注册服务器上可以有多个仓库 ...

  2. Clion设置字体大小和护眼色

    1.显示行号File->Settings->Editor->General->Appearance右侧,Show line numbers 2.设置字体大小与行间距File-& ...

  3. Django之ContentType组件

    一.理想表结构设计 1.初始构建 1. 场景刚过去的双12,很多电商平台都会对他们的商品进行打折促销活动的,那么我们如果要实现这样的一个场景,改如何设计我们的表? 2. 初始表设计 注释很重要,看看吧 ...

  4. 【并发编程】【JDK源码】J.U.C--组件FutureTask、ForkJoin、BlockingQueue

    原文:慕课网实战·高并发探索(十三):并发容器J.U.C -- 组件FutureTask.ForkJoin.BlockingQueue FutureTask FutureTask是J.U.C中的类,是 ...

  5. BZOJ2616PERIODNI

    题目描述 给定一个N列的表格,每列的高度各不相同,但底部对齐,然后向表格中填入K个相同的数,填写时要求不能有两个数在同一列,或同一行,下图中b是错误的填写,a是正确的填写,因为两个a虽然在同一行,但它 ...

  6. Mariadb修改root密码

    默认情况下,新安装的 mariadb 的密码为空,在shell终端直接输入 mysql 就能登陆数据库. 如果是刚安装第一次使用,请使用 mysql_secure_installation 命令初始化 ...

  7. JS学习笔记Day14

    一.正则表达式 (一)正则的概念 1.正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去匹配符合规则的字符 (二)创建正则的方式 1.字面量的 ...

  8. 安装python caffe过程中遇到的一些问题以及对应的解决方案

    关于系统环境: Ubuntu 16.04 LTS cuda 8.0 cudnn 6.5 Anaconda3 编译pycaffe之前需要配置文件Makefile.config ## Refer to h ...

  9. centos7下tomcat8.5安装部署与优化

    转自:https://www.cnblogs.com/busigulang/articles/8529719.html centos 7 Tomcat 8.5 的安装及生产环境的搭建调优 一 安装to ...

  10. python中的三元运算

    一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...