拖动以选择Vue.js的组件–vue-Drag-Selector

拖动以选择Vue.js的组件–vue-Drag-Selector
插件名称 Drag-Selector
发布时间 2020年5月1日
插件作者 xubaifuCode

Drag-Selector是Vue.js组件,允许访问者通过鼠标拖动选择多个项目。

安装和下载:

# NPM
$ npm install vue-drag-selector --save

使用:

1.导入拖动选择器组件。

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

2.基本用法:

<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>
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);
    }
  }
};