封装一个vue拖拽上传组件_一个简单的Vue拖动选择器组件

封装一个vue拖拽上传组件

Vue拖动选择器 (Vue-Drag-Selector)

A simple vue drag selector component.

一个简单的Vue拖动选择器组件。

View demo 查看演示 View Github 查看Github

安装 (install)

npm i vue-drag-selector

进口 (import)

// main.js
import VueDragSelector from "vue-drag-selector";
Vue.use(VueDragSelector);

用法 (Usage)

<template>
    <div>
        <drag-selector v-model="checkedList"
                       @change="handleDragSelectorChange" class="drag-selector">
            <drag-selector-item v-for="(item, index) in myDragList"
                                :value="item"
                                :key="index" class="drag-selector__item">
                {{ item }}
            </drag-selector-item>
        </drag-selector>
        {{ checkedList }}
    </div>
</template>

<script>
  export default {
    name: "app",
    data() {
      return {
        checkedList: [],
        myDragList: [
          { a: 1, b: 5 },
          { a: 2, b: 6 },
          { a: 3, b: 7 }
        ]
      };
    },
    methods: {
      handleDragSelectorChange(checkedList) {
        console.log(checkedList);
      }
    }
  };
</script>

翻译自: https://vuejsexamples.com/a-simple-vue-drag-selector-component/

封装一个vue拖拽上传组件