vue项目拖拽排序

àì夳堔傛蜴生んèń 2022-05-01 12:12 370阅读 0赞

### 推荐一个前端组件库：[轮子工厂][Link 1] ###

我用的是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']
        };
      }
    };
    复制代码

转载于:https://juejin.im/post/5cd27d08f265da039b088669

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgold.xitu.io