基于vue的一款框选组件

直接上图

示例

戳我感受

详细参数，请访问GitHub项目地址

❤️❤️❤️如果喜欢，请 star 😯❤️❤️❤️

1.下载

npm install vue-drag-select-pro --save

yarn add vue-drag-select-pro

2.导入

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)

3.组件示例

<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: []
    }
  }
}