基于Vue的鼠标拖拽选择组件
Demo
online demo
Getting Started
Install
npm install vue-drag-select-pro --save
yarn add vue-drag-select-pro
Document
Import
import Vue from 'vue'
import App from './App.vue'
import vueDragSelectPro from 'vue-drag-select-pro'
// 注意:一定要引入css样式
import 'vue-drag-select-pro/lib/vueDragSelectPro.css'
Vue.use(vueDragSelectPro)
Usage
<template>
<div>
<vue-drag-select v-model="selectedList" value-key="name" :item-margin="[0, 10, 10, 0]" ref="dragSelect">
<template v-for="(item, index) in dataList">
<drag-select-option :key="item.id" :value="item" :item-index="index">
<div class="item-self">
// 自定义内容
</div>
</drag-select-option>
</template>
</vue-drag-select>
</div>
</template>
export default {
data () {
return {
selectedList: [],
dataList: []
}
}
}
Select Attributes
参数 |
说明 |
类型 |
默认值 |
value / v-model |
绑定选中值 |
Array |
[] |
value-key |
作为 value 唯一标识的键名,option绑定值为对象类型时必填 |
string |
value |
item-width |
option元素的宽度 |
Number |
100 |
item-height |
option元素的高度 |
Number |
105 |
item-margin |
option元素的margin |
Array(number) |
[20,20,20,20] |
warpper-padding |
内容器的padding |
Array(number) |
[20,20,20,20] |
slow-speed |
滚动的最小速度 |
Number |
0 |
fast-speed |
滚动的最大速度 |
Number |
20 |
Select Methods
方法名 |
说明 |
参数 |
elementLayout |
重排option位置 |
- |
option Attributes
参数 |
说明 |
类型 |
默认值 |
value |
option绑定值 |
string/number/object |
- |
item-index |
用于选择项排序(就传遍历时的index,很重要!!!) |
Number |
- |