vue-slicksort eine Drag-and-Drop-Komponente von vue.js

In diesem Artikel wird hauptsächlich vue-slicksort vorgestellt, eine leistungsstarke ziehbare vue.js-Komponente. Es kann das Koordinatensystem automatisch scrollen und sperren. Unterstützt flüssige Animationseffekte beim Ziehen. Kann horizontales, vertikales oder Rasterziehen unterstützen. Unterstützt Berührung. Ich hoffe, dieser Artikel kann allen helfen.

DEMO

Installieren

Über npm installieren

$ npm install vue-slicksort --save

Über Garn installieren

$ yarn add vue-slicksort

Plug-in-Anwendung

Einführung in Komponenten

// 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;

Referenz

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

Komponentenparameter

in Ihrer Vue-Datei wie diese

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 – eine Website, die hervorragende Komponenten von Vue und Angular teilt.

Verwandte Empfehlungen:

Erlernen Sie die Verwendung von JS-Drag-and-Drop-Komponenten_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonvue-slicksort eine Drag-and-Drop-Komponente von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!