快捷導(dǎo)航

功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用

更新時(shí)間：2023年06月06日 14:49:32 作者：AshleyLv

這篇文章主要為大家介紹了功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

介紹

vue-slicksort -- 這是一個(gè)功能強(qiáng)大的可拖拽的vue.js組件。它可以自動(dòng)滾動(dòng)，鎖定坐標(biāo)系。支持拖拽時(shí)，流暢的動(dòng)畫效果?？梢灾С炙?，垂直或者網(wǎng)格的拖拽。支持觸摸。

DEMO

安裝

通過(guò)npm安裝

$ npm install vue-slicksort --save

通過(guò)yarn安裝

$ yarn add vue-slicksort

插件應(yīng)用

引入組件

// 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: `
    <div class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
      </SortableList>
    </div>
  `,
  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),
});

組件參數(shù)

Property	Type	Default	Description
value	Array	-	列表的內(nèi)容
axis	String	y	列表元素可以被橫向拖拽，縱向拖拽還是網(wǎng)格拖拽。用x,y,xy來(lái)表示。
lockAxis	String	-	用于排序時(shí)在坐標(biāo)系中鎖定元素的移動(dòng)
helperClass	String	-	helper的自定義樣式類
transitionDuration	Number	300	元素移動(dòng)動(dòng)畫的持續(xù)時(shí)間
pressDelay	Number	0	如果需要當(dāng)元素被按下一段時(shí)間再允許拖拽，可以設(shè)置這個(gè)屬性
pressThreshold	Number	5	移動(dòng)允許被忽略的閾值，單位是像素
distance	Number	0	如果需要在拖拽出一定距離之后才被識(shí)別為正在拖拽的元素，可以設(shè)置這個(gè)屬性
useDragHandle	Boolean	false	如果使用HandleDirective，設(shè)置為true
useWindowAsScrollContainer	Boolean	false	是否設(shè)置window為可滾動(dòng)的容器
hideSortableGhost	Boolean	false	是否設(shè)置window為可滾動(dòng)的容器
useWindowAsScrollContainer	Boolean	true	是否自動(dòng)隱藏ghost元素
lockToContainerEdges	Boolean	false	是否對(duì)正在拖拽的元素鎖定容器邊緣
lockOffset	String	50%	對(duì)正在拖拽的元素鎖定容器邊緣的偏移量
shouldCancelStart	Function	-	在拖拽開始前這個(gè)方法將被調(diào)用
getHelperDimensions	Function	-	可選方法({node, index, collection}),用于返回SortableHelper的計(jì)算尺寸