Maison > Article > interface Web > vue-slicksort un composant glisser-déposer vue.js
Cet article partage principalement avec vous vue-slicksort, qui est un puissant composant vue.js déplaçable. Il peut automatiquement faire défiler et verrouiller le système de coordonnées. Prend en charge les effets d'animation fluides lors du glissement. Peut prendre en charge le glissement horizontal, vertical ou sur grille. Prend en charge le toucher. J'espère que cet article pourra aider tout le monde.
DÉMO
Installer via npm
$ npm install vue-slicksort --save
Installer via fil
$ yarn add vue-slicksort
Présentation des composants
// 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;
Référence
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的计算尺寸 |
Wheel Factory - un site Web qui partage d'excellents composants de Vue et Angular.
Recommandations associées :
Apprenez à utiliser les compétences de glisser-déposer JS_javascript des composants
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!