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