启用触摸的拖动选择组件，使用户可以通过拖动和触摸事件选择组中的多个项目。

安装和下载：

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

使用:

1.安装并导入。

import Vue from 'vue';
import DragSelect from "./DragSelect.vue";

2.注册组件。

export default {
  components: { DragSelect },
  data() {
    return { selectedItems: [] };
  }
};

3.在您的应用模板中：

<template>
  <drag-select
    attribute="itemNumber"
    v-slot="{ selected }"
    @change="selectedItems = $event"
  >
    <div
      v-for="item in 24"
      :key="item"
      :itemNumber="item"
      :class="{
        'shadow-outline': selected.includes(String(item))
      }"
    >
      {{ item }}
    </div>
  </drag-select>
  Selected items:
  <div v-for="item in selectedItems" :key="item">
    {{ item }}
  </div>
</template>

4.默认。

attribute: {
  type: String,
  required: true
},
color: {
  type: String,
  default: "#4299E1"
},
opacity: {
  type: Number,
  default: 0.7
}

---

官网：https://github.com/andi23rosca/drag-select-vue

演示：https://www.vue365.cn/code_demo.php?id=92

GitHub下载：https://github.com/andi23rosca/drag-select-vue/archive/master.zip