vue-slicksort一個vue.js拖曳組件

本文主要和大家分享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),
});

元件參數

Array-清單的內容axisStringy #列表元素可以被橫向拖曳，縱向拖曳還是網格拖曳。用x,y,xy表示。 lockAxisString-用於排序時在座標系中鎖定元素的移動helperClassString-helper的自訂樣式類別transitionDuration#Number300元素移動動畫的持續時間#pressDelayNumber0 如果需要當元素被按下一段時間再允許拖曳，可以設定這個屬性#pressThresholdNumber 5移動允許被忽略的閾值，單位是像素#distanceNumber0#如果需要在拖曳出一定距離之後才被辨識為正在拖曳的元素，可以設定這個屬性#useDragHandleBooleanfalse 如果使用HandleDirective，設定為trueuseWindowAsScrollContainerBooleanfalse是否設定window為可捲動的容器hideSortableGhostBooleanfalse是否設定window為可捲動的容器useWindowAsScrollContainerBooleantrue是否自動隱藏ghost元素lockToContainerEdges#Booleanfalse是否對正在拖曳的元素鎖定容器邊緣lockOffsetString

Property	Type	Default	Description
value

## ##50%######對正在拖曳的元素鎖定容器邊緣的偏移量#############shouldCancelStart######Function######- ######在拖曳開始前這個方法將會被呼叫############getHelperDimensions######Function######-#######可選方法({node, index, collection}),用於返回SortableHelper的計算尺寸###############輪子工廠--一個分享vue,angular優秀組件的網站。 ######相關推薦：#########JS拖曳元件學習使用_javascript技巧###################### #

以上是vue-slicksort一個vue.js拖曳組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！