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

Installer via npm

$ npm install vue-slicksort --save

Installer via fil

$ yarn add vue-slicksort

Application plug-in

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),
});

Paramètres des composants

dans votre fichier vue comme ce

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!