本文主要和大家分享vue-slicksort ，它是一个功能强大的可拖拽的vue.js组件。 它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。希望本文能帮助到大家。
DEMO
安装
通过npm安装
$ npm install vue-slicksort --save
通过yarn安装
立即学习“前端免费学习笔记（深入）”；
$ yarn add vue-slicksort
插件应用
引入组件
// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from 'vue-slicksort';
// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;在你的vue文件中这样引用
import Vue from 'vue';
import { ContainerMixin, ElementMixin } from 'vue-slicksort';
const SortableList = {
mixins: [ContainerMixin],
template: `
<ul class="list">
<slot />
</ul>
`,
};
const SortableItem = {
mixins: [ElementMixin],
props: ['item'],
template: `
<li class="list-item">{{item}}</li>
`,
};
const ExampleVue = {
name: 'Example',
template: `
<p class="root">
<SortableList lockAxis="y" v-model="items">
<SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
</SortableList>
</p>
`,
components: {
SortableItem,
SortableList,
},
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
};
},
};
const app = new Vue({
el: '#root',
render: (h) => h(ExampleVue),
});组件参数
| Property | Type | Default | Description |
|---|---|---|---|
| value | Array | - | 列表的内容 |
| axis | String | y | 列表元素可以被横向拖拽，纵向拖拽还是网格拖拽。用x,y,xy来表示。 |
| lockAxis | String | - | 用于排序时在坐标系中锁定元素的移动 |
| helperClass | String | - | helper的自定义样式类 |
| transitionDuration | Number | 300 | 元素移动动画的持续时间 |
| pressDelay | Number | 0 | 如果需要当元素被按下一段时间再允许拖拽，可以设置这个属性 |
| pressThreshold | Number | 5 | 移动允许被忽略的阈值，单位是像素 |
| distance | Number | 0 | 如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素，可以设置这个属性 |
| useDragHandle | Boolean | false | 如果使用HandleDirective，设置为true |
| useWindowAsScrollContainer | Boolean | false | 是否设置window为可滚动的容器 |
| hideSortableGhost | Boolean | false | 是否设置window为可滚动的容器 |
| useWindowAsScrollContainer | Boolean | true | 是否自动隐藏ghost元素 |
| lockToContainerEdges | Boolean | false | 是否对正在拖拽的元素锁定容器边缘 |
| lockOffset | String | 50% | 对正在拖拽的元素锁定容器边缘的偏移量 |
| shouldCancelStart | Function | - | 在拖拽开始前这个方法将被调用 |
| getHelperDimensions | Function | - | 可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸 |
轮子工厂--一个分享vue,angular优秀组件的网站。
相关推荐：
