插件名称 | drag-select-vue |
---|---|
发布时间 | 2020年4月7日 |
插件作者 | andi23rosca |
启用触摸的拖动选择组件,使用户可以通过拖动和触摸事件选择组中的多个项目。
# 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