demo preview

使用方法

step1: install select-tool

浏览器直接引入

1<script src="./js/selectTool.js"></script>

npm 包管理

used select-tool in your vue project

1npm install -D select-tool

.vue file import select-tool

1import selectToolInit from "select-tool"

step2：创建被初始化的html元素（.selectDashboard），包含可选的容器同时又是可以框选的范围（.selet_tool_canvas），和可被选中的容器(.selectItem)

1<div class="selectDashboard">
2        <div class="selet_tool_canvas">
3            <div class="selectItem" customAttribute='this custom attribute' ids="1"></div>
4            <div class="selectItem" customAttribute='this custom attribute' ids="2"></div>
5            <div class="selectItem" customAttribute='this custom attribute' ids="3"></div>
6            <div class="selectItem" customAttribute='this custom attribute' ids="4"></div>
7            <div class="selectItem" customAttribute='this custom attribute' ids="5"></div>
8            <div class="selectItem" customAttribute='this custom attribute' ids="6"></div>
9            <div class="selectItem" customAttribute='this custom attribute' ids="7"></div>
10            <div class="selectItem" customAttribute='this custom attribute' ids="8"></div>
11            <div class="selectItem" customAttribute='this custom attribute' ids="9"></div>
12            <div class="selectItem" customAttribute='this custom attribute' ids="10"></div>
13            <div class="selectItem" customAttribute='this custom attribute' ids="11"></div>
14            <div class="selectItem" customAttribute='this custom attribute' ids="12"></div>
15            <div class="selectItem" customAttribute='this custom attribute' ids="13"></div>
16            <div class="selectItem" customAttribute='this custom attribute' ids="14"></div>
17            <div class="selectItem" customAttribute='this custom attribute' ids="15"></div>
18            <div class="selectItem" customAttribute='this custom attribute' ids="16"></div>
19            <div class="selectItem" customAttribute='this custom attribute' ids="17"></div>
20            <div class="selectItem" customAttribute='this custom attribute' ids="18"></div>
21            <div class="selectItem" customAttribute='this custom attribute' ids="19"></div>
22            <div class="selectItem" customAttribute='this custom attribute' ids="20"></div>
23            <div class="selectItem" customAttribute='this custom attribute' ids="21"></div>
24            <div class="selectItem" customAttribute='this custom attribute' ids="22"></div>
25            <div class="selectItem" customAttribute='this custom attribute' ids="23"></div>
26            <div class="selectItem" customAttribute='this custom attribute' ids="24"></div>
27            <div class="selectItem" customAttribute='this custom attribute' ids="25"></div>
28            <div class="selectItem" customAttribute='this custom attribute' ids="26"></div>
29            <div class="selectItem" customAttribute='this custom attribute' ids="27"></div>
30            <div class="selectItem" customAttribute='this custom attribute' ids="28"></div>
31            <div class="selectItem" customAttribute='this custom attribute' ids="29"></div>
32            <div class="selectItem" customAttribute='this custom attribute' ids="30"></div>
33            <div class="selectItem" customAttribute='this custom attribute' ids="31"></div>
34            <div class="selectItem" customAttribute='this custom attribute' ids="32"></div>
35        </div>
36    </div>

step3：调用函数传入初始化参数

1//vue 框架里使用需要在dom加载完后才可以调用 例如在 mounted(){ selectToolInit(初始化参数) }
2selectToolInit({
3        canvas:'.selectDashboard',
4        initTarget:'.selet_tool_canvas',
5        selectElement:'.selectItem',
6        // onloadBanRightClickTarget:'.resultContent',  ban browser contentmenu if mutiple select-tool methods in page
7        optionalContentmenu:{single:['修改','删除','下发课程','上架','下架'],multiple:['批量删除','批量下发课程','批量上架','批量下架']},
8        customAttribute:['customAttribute'],
9        crudEventCallbackSingle(handleTitle,event,selectNode){
10            console.log('click select tool contentmenu==================>',handleTitle,event,selectNode)
11        },
12        crudEventCallbackMultiple(handleTitle,event,selectNode){
13            console.log('click select tool contentmenu==================>',handleTitle,event,selectNode)
14        },
15        itemClick(basedata,event){
16            console.log('click item==================>',basedata)
17        },
18        selectedEventListener(arr,selectedNode){
19            console.log('selected==================>',arr,selectedNode)
20        },
21        batchStatus(status) {
22            console.log(status)
23        }
24    })

canvas

initTarget

selectElement