vue项目拖拽排序

·  阅读 2930

推荐一个前端组件库:轮子工厂

我用的是vue-slicksort拖拽组件,这是一个功能强大的可拖拽的vue.js组件。 它可以自动滚动,锁定坐标系。支持拖拽时,流畅的动画效果。可以支持水平,垂直或者网格的拖拽。支持触摸。 支持IE10+ 以及谷歌,搜狗等主流浏览器

安装

  • 通过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;
复制代码

使用组件

  • 自定义使用组件方式
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)
});
复制代码
  • 该插件也提供的预构建的组件来实现mixins
import { SlickList, SlickItem } from 'vue-slicksort';

const ExampleVue = {
  name: 'Example',
  template: `
    <div class="root">
      <SlickList lockAxis="y" v-model="items">
        <SlickItem v-for="(item, index) in items" :index="index" :key="index">
          {{ item }}
        </SlickItem>
      </SlickList>
    </div>
  `,
  components: {
    SlickItem,
    SlickList
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8']
    };
  }
};
复制代码
分类:
前端
标签: