基于vue的一款框选组件

2019-10-14

直接上图

戳我感受

详细参数,请访问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: []
    }
  }
}
原文链接:segmentfault.com

上一篇:Lodash入门以及最常用方法汇总
下一篇:动态海报营销FabricJs方案
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部