1.1.3 • Published 2 years ago
select-tool v1.1.3
demo preview
使用方法
step1: install select-tool
浏览器直接引入
<script src="./js/selectTool.js"></script>
npm 包管理
used select-tool in your vue project
npm install -D select-tool
.vue file import select-tool
import selectToolInit from "select-tool"
step2:创建被初始化的html元素(.selectDashboard),包含可选的容器同时又是可以框选的范围(.selet_tool_canvas),和可被选中的容器(.selectItem)
<div class="selectDashboard">
<div class="selet_tool_canvas">
<div class="selectItem" customAttribute='this custom attribute' ids="1"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="2"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="3"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="4"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="5"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="6"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="7"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="8"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="9"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="10"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="11"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="12"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="13"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="14"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="15"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="16"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="17"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="18"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="19"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="20"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="21"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="22"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="23"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="24"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="25"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="26"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="27"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="28"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="29"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="30"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="31"></div>
<div class="selectItem" customAttribute='this custom attribute' ids="32"></div>
</div>
</div>
step3:调用函数传入初始化参数
//vue 框架里使用需要在dom加载完后才可以调用 例如在 mounted(){ selectToolInit(初始化参数) }
selectToolInit({
canvas:'.selectDashboard',
initTarget:'.selet_tool_canvas',
selectElement:'.selectItem',
// onloadBanRightClickTarget:'.resultContent', ban browser contentmenu if mutiple select-tool methods in page
optionalContentmenu:{single:['修改','删除','下发课程','上架','下架'],multiple:['批量删除','批量下发课程','批量上架','批量下架']},
customAttribute:['customAttribute'],
crudEventCallbackSingle(handleTitle,event,selectNode){
console.log('click select tool contentmenu==================>',handleTitle,event,selectNode)
},
crudEventCallbackMultiple(handleTitle,event,selectNode){
console.log('click select tool contentmenu==================>',handleTitle,event,selectNode)
},
itemClick(basedata,event){
console.log('click item==================>',basedata)
},
selectedEventListener(arr,selectedNode){
console.log('selected==================>',arr,selectedNode)
},
batchStatus(status) {
console.log(status)
}
})
canvas
initTarget
selectElement