vue-drag-select-pro

基于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	-