当前位置:Gxlcms > JavaScript > vue-slicksort一个vue.js拖拽组件

vue-slicksort一个vue.js拖拽组件

时间:2021-07-01 10:21:17 帮助过:510人阅读

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

组件参数

PropertyTypeDefaultDescription
valueArray-列表的内容
axisStringy列表元素可以被横向拖拽,纵向拖拽还是网格拖拽。用x,y,xy来表示。
lockAxisString-用于排序时在坐标系中锁定元素的移动
helperClassString-helper的自定义样式类
transitionDurationNumber300元素移动动画的持续时间
pressDelayNumber0如果需要当元素被按下一段时间再允许拖拽,可以设置这个属性
pressThresholdNumber5移动允许被忽略的阈值,单位是像素
distanceNumber0如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素,可以设置这个属性
useDragHandleBooleanfalse如果使用HandleDirective,设置为true
useWindowAsScrollContainerBooleanfalse是否设置window为可滚动的容器
hideSortableGhostBooleanfalse是否设置window为可滚动的容器
useWindowAsScrollContainerBooleantrue是否自动隐藏ghost元素
lockToContainerEdgesBooleanfalse是否对正在拖拽的元素锁定容器边缘
lockOffsetString50%对正在拖拽的元素锁定容器边缘的偏移量
shouldCancelStartFunction-在拖拽开始前这个方法将被调用
getHelperDimensionsFunction-可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸

轮子工厂--一个分享vue,angular优秀组件的网站。

相关推荐:

JS拖拽组件学习使用_javascript技巧

以上就是vue-slicksort一个vue.js拖拽组件的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行