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