轻量级拖拽框选Vue指令工具 中文文档在下方

ty-drag-select

Lightweight vue2 or vue3 directives for elements selection 

description:
    -The window select dom-elements and return corresponding data
    -Hold ctrl to select continuously

how to use

npm install ty-drag-select -S
import dragSelect from 'ty-drag-select'

Vue.use(dragSelect)

Vue.use to mount directives to the global environment,then just do it!

Configuration parameters

Example:

<div v-dragSelect='{ 
    selectClass:[".child"],//Configure the element className that can to be selected   --Required
    reSelect:funciton(),//Reselect trigger function , Hold down "ctrl" to reselect this function will not be triggered  --Not required
    change:function(newData),//Update data Event    
                            --newData<Array>  selected data --Required
    lostItem:function(data)//Triggered when selected data loss   
                            --data<Array> Lost data after selection --Required
    },
    syncData:{switch:false}   -- switch<Blooean>  dragSelect switch -- not required, default true
' >

    <!-- The temp that needs to be selected --> 
    <!-- 
        dragSelectType  <string>  Bind type, the same type will be integrated and returned in the array  
        dragSelectId <string> Bind id or custom info  When selected, the data will be returned 
        dragSelectWidth <string> Bind width number The width of the custom current element can be selected, and the width of the source code is read through the dom, so the element  that is overflowed needs to manually define its width

        ps: Here is the dom custom attribute. not vue-bind
    -->
    <div 
        class='child' 
        dragSelectType='div'
        dragSelectId='1'
        dragSelectWidth='500' 
    />
</div> 

Version

1.0.1
    -- Compatible with vue2&vue3

1.0.2
    -- Performance optimization, reduce the number of change events triggered when new items are selected

1.0.3
    -- Document optimization

1.0.31
    -- Document optimization

1.0.41
    -- Add plugin switch control variable

Author contact information

welcome to submit optimization comments or bugs
QQ E-mail:[email protected]

ty-drag-select

//vue浏览器框选指令

功能描述:
   1.框选元素并返回对应数据
   2.按住ctrl连续选择

注册使用

npm install ty-drag-select -S
import dragSelect from 'ty-drag-select'

Vue.use(dragSelect)

//use挂载到全局环境 即可位置通用   

参数

示例：

<div v-dragSelect='{ 
    selectClass:[".child"],//配置需要被选中的元素类名  -必填
    reSelect:funciton(),//重选触发 按住ctrl重选则不触发此函数 -非必填
    change:function(newData),//选中时触发  
                            --newData<Array>  选中时的数据 -必填
    lostItem:function(data)//已选中过的数据丢失触发 
                            --data<Array> 选框丢失的数据 -必填
    },
    syncData:{switch:false}   -- switch<Blooean> 功能开关  -非必填，默认打开 
'>

    <!-- 需要被选中的元素 --> 
    <!-- 
        dragSelectType 类型字段 string  相同的类型会集成在数组中返回
        dragSelectId 信息字段 string  需要选中后获取的数据
        dragSelectWidth 自定义当前元素可以被选中的范围宽。

        ps: !注意,因为框选不可以将原生dom逆转未vue虚拟dom组件。所以这里是dom自定义属性。不是bind
    -->
    <div 
        class='child' 
        dragSelectType='div'
        dragSelectId='1'
        dragSelectWidth='500' 
    />
</div>  

版本

1.0.1
    1.兼容vue2 vue3 

1.0.2
    1.性能优化,减少框选新增项时触发的change事件次数 

1.0.3
    1.文档优化 支持英文文档
    
1.0.31
    1.文档更新

1.0.41
    1.添加插件开关控制变量
    

作者联系方式

欢迎各位小伙伴提交优化意见或者bug  
qq邮箱:[email protected]