1.0.4 • Published 5 years ago

vue-drag-select-pro v1.0.4

Weekly downloads
25
License
MIT
Repository
github
Last release
5 years ago

基于Vue的鼠标拖拽选择组件

npm.io

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绑定值为对象类型时必填stringvalue
item-widthoption元素的宽度Number100
item-heightoption元素的高度Number105
item-marginoption元素的marginArray(number)20,20,20,20
warpper-padding内容器的paddingArray(number)20,20,20,20
slow-speed滚动的最小速度Number0
fast-speed滚动的最大速度Number20

Select Methods

方法名说明参数
elementLayout重排option位置-

option Attributes

参数说明类型默认值
valueoption绑定值string/number/object-
item-index用于选择项排序(就传遍历时的index,很重要!!!)Number-