自定义类似于jQuery用户界面可选的某视频剪辑软件指令v可选

话不多说，先看效果。

其实就是一个可以按住鼠标进行一个区域内条目选择的功能，相信用过Jquery用户界面的都知道这是可选择的的功能，然而我们如果用某视频剪辑软件开发的话没有类似的插件，当然你仍然可以把jquery的拿过来直接用，但是我又不想引入jquery和jquery用户界面在我的项目中，于是我就自己尝试着实现类似的功能。

要实现这个功能分两步。第一步是实现鼠标选择区域的功能，第步部是把这个区域内被选择的项目添加一个活跃的的类。

先看如何实现按住鼠标画虚线框，思路是先把容器元素的定位改为亲戚然后判断当鼠标按下（鼠标向下)的时候，进行记住这个点击点的位置（第二层，第三层),然后鼠标移动（鼠标移动)的时候，实时的监测鼠标的位置（第二层，第三层),有了这两个位置就可以动态的创建一个div，它的定位为绝对的，然后把它添加的容器框里，并且每次清空前一个框就可以了。为什么是用e层x e层ry呢，

第六层

如果元素的位置样式不是默认的静态的，我们说这个元素具有定位属性。

在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素，计算鼠标与其的偏移值，以找到元素的边界的左上角的外交点作为相对点。如果找不到具有定位属性的元素，那么就相对于当前页面计算偏移，此时等同于佩吉。按照这个思路完成以下代码：

导出默认值(Vue，options={ })={ const listener=(ele，binding)={ let react area={ start x : 0，startY: 0，end x : 0 0，end y : 0 0 }//是否一直按下鼠标让isMouseDown=false让区域选择={} //将元素定位改为相对的元素。风格。位置='相对'元素。addeventlistener('鼠标按下'，函数(e){ reactarea。startx=e . layerx反应区。starty=e . layeryisMouseDown=true })ele。addeventlistener(' mousemove '，函数(e){ if(IsMouseDown){ let preArea=ele。getelementsbyclasname(' v-selected-area ')if(preArea。长度){ ele。removechild(preArea[0])}反应区域。endx=e . layerx反应面积。endy=e . layery let left值=0 let topValue=0 let width值=math。ABS(反应区。startx-反应区。endx)判断同时有宽高才开始画虚线框if(reactArea.startX！=反应面积。endx反应区。开始！=react area . endy){ 0区域选择=document.createElement('div ')区域选择。class list . add(' v-选定区域')区域选择。风格。位置='绝对'；区域选择。样式。左侧=左值“px”区域选择。样式。顶部=顶值“px”区域选择。样式。宽度=宽度值“px”区域选择。样式。高度=高度值“px”区域选择。样式。边框="1px虚线灰色"元素。追加（区域选择)} } })元素。添加事件侦听器(“mouseup”，函数(e) { isMouseDown=false //每次鼠标点击完了区域选择如果(区域选择区域选择。子节点元素包含(区域选择)){ ele.removeChild(区域选择)}区域选择=null })vue。指令('可选，{ inserted:listener，updated:listener })这个时就可以实现画虚线框的效果

下一步是如何选择每个项目。想法是遍历这个容器ul的所有子元素li，然后判断每个li是否在所选的框内。然后查看每个元素的offsetLeft和offsetTop，计算元素相对于父元素的位置，然后通过getboundingclientect()确定子元素的宽度和高度。height和getboundingclientect()。宽度。这些可以计算出元素的位置和大小，然后如何判断元素是否在选择区域？我的规则是，这个元素的四个角位置中的任何一个都在选择区域内，或者选择区域在这个区域内，即使选择了这个元素(这个判断方法并不完美)。按照这个思路，继续完成我们的代码：

导出默认值(Vue，options={ })={ const listener=(ele，binding)={ let react area={ start x : 0，startY: 0，end x : 0 0，end y : 0 0 }//是否一直按下鼠标让isMouseDown=false让区域选择={} //将元素定位改为相对的元素。风格。位置='相对'元素。addeventlistener('鼠标按下'，函数(e){ reactarea。startx=e . layerx反应区。starty=e . layeryisMouseDown=true })ele。addeventlistener(' mousemove '，函数(e){ if(IsMouseDown){ let preArea=ele。getelementsbyclasname(' v-selected-area ')if(preArea。长度){ ele。removechild(preArea[0])}反应区域。endx=e . layerx反应面积。endy=e . layery let left值=0 let topValue=0 let width值=math。ABS(反应区。startx-反应区。endx)判断同时有宽高才开始画虚线框if(reactArea.startX！=反应面积。endx反应区。开始！=react area . endy){ 0区域选择=document.createElement('div ')区域选择。class list . add(' v-选定区域')区域选择。风格。位置='绝对'；区域选择。样式。左侧=左值“px”区域选择。样式。顶部=顶值“px”区域选择。样式。宽度=宽度值“px”区域选择。样式。高度=高度值“px”区域选择。样式。边框='1px虚线灰色ele.append(区域选择)}让子项=ele.getElementsByTagName('li ')为（让I=0；一、儿童我){让孩子身高=孩子[我].getBoundingClientRect().高度让childrenWidth=children[i].getBoundingClientRect().宽度/每个里元素的位置让offsetLeft=children[i].offsetLeft让儿童.offsetTop //每个里元素的宽高让结束位置h=子高度偏移顶部让结束位置w=左/右子宽度偏移/五个条件满足一个就可以判断被选择//一是右下角在选择区域内让require 1=结束位置顶值结束位置左值结束位置顶值高度值结束位置左值宽度值/二是左上角在选择区域内让require 2=偏移顶值偏移左值偏移顶值高度值偏移左值宽度值//三是右上角在选择区域内让require 3=偏移顶值偏移左子宽度左值偏移顶值高度值偏移左子宽度左值宽度value//四是左下角在选择区域内let required 4=偏移顶子高度顶值偏移左值偏移顶子高度顶值高度值偏移左值宽度值//五选择区域在元素体内let require 5=偏移顶值偏移左值偏移顶子高度顶值高度值偏移子宽度左值宽度值if(require 1 | | require 2 | | require 3 | | require 4 | | require 5){ children[I]。 班级名单。添加(' active ')} else { children[I]。班级名单。移除('活动')} } } ele。addevent listener(' mouseup ')，函数(e){ is mouse down=false if(area select area select。儿童节点ele。包含(aresel)){ ele。remove child(aresele)} aresel=null })vue完成之后再看看如何使用，html结构：

ul v-可选' li class='方形'项目' 1/李类='椭圆形'项目' 2/李类='三角形'项目3/李类='三角形“topleft”项目' 4/李类='曲线箭头'项目' 5/李类='三角形“topleft”项目6/li/ul注意保险商实验所的这个v可选就是我们自定义的指令，但是使用之前必须Vue.use

从' vue '导入vue '导入可选自' @/components/vue-selected/vue-selected . js '/这将更改为您的js路径Vue.use(可选)；向我们的ul li添加一些样式，请注意，我们所选的项目将添加一个活动类，这将更改所选项目的样式

样式范围的ul { margin: 40px 40px 40pxborder: 1px纯红；宽度： 300 px；填充-bottom : 20px；} ul li { width: 200pxheight: 30pxlist-style:无；border: 1px纯黑；左边距left: 10px边距-top : 30px；文本对齐：中心；线高： 30px；用户选择： none；} ul li.active{底色-颜色：红色；}/style这样可以达到最初的效果。其实在代码运行过程中还是有很多小bug的。本文只提供了一个简单的思路和代码，通过修改代码可以添加更多的功能。如果你不明白为什么这个自定义指令是这样写的，可以参考我的另一篇文章来自定义懒加载图片插件v-lazyload。

//www . JB 51 . net/article/112355 . htm

摘要

以上是边肖推出的自定义Vue指令v-selected，类似jQuery UI Selectable。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！