UI — 正式封装

[TOC] >[success] # 正式分装章节 ~~~ 1.上个章节讲了一下思路，这个章节会封装一个splitpane的布局组件 ~~~ >[danger] ##### 基础面板 ~~~ 1.根据上章节封装一个基础面板 ~~~ ~~~ ~~~ >[info] ## 增加事件 ~~~ 1.接下来需要做通过给红色条添加事件，可以通过数据去操作布局 2.了解几个方法'event.pageX' -- 鼠标x轴的坐标距离（准确或是） 3.'this.$refs.outer.getBoundingClientRect()' -- 获取绑定dom元素的一些 距离浏览器的基本信息： DOMRect {x: 8, y: 8, width: 400, height: 200, top: 8, …} bottom:208 height:200 left:8 right:408 top:8 width:400 x:8 y:8 3.常见想得到某个元素具体的位置，一般采用鼠标距离减去dom元素距 离浏览器距离 4.'event'事件中隐藏的两个快捷方法'event.srcElement' -- 获取当前dom 5.'event'事件中隐藏的两个快捷方法'event.srcElement.getBoundingClientRect()' -- 获取当前dom位置信息 6.去除css 拖住样式'user-select: none;' ~~~ >[danger] ##### 绑定鼠标点击红条时候触发事件 ~~~ 1.想在鼠标点击的时候触发一个事件，可以得到红色条距离dom的位置 ，后期根据这个位置去触发让左侧和右侧距离重新计算。 2.点击事件应该绑定在哪里，如果将点击事件绑定在红条区域，会出现 当鼠标移出红条的位置的时候，整个动态布局停止 'event.target.addEventListener('mousemove',this.handleMousemove)' 3.因此不能写成上面的写法，而是应该绑定在整个document上 'document.addEventListener('mousemove',this.handleMousemove)' 4.在点击事件上，增加的鼠标移动后重新计算的事件分开写方便维护 5.增加移入事件后，要对应的加入移除事件的后续操作，因此在data 中声明一个变量'canMove'用来记录当前点击还是未点击来触 发'handleMousemove' 事件 6.由于'mousemove' 是绑定在全局的，因此'mouseup' 也要绑定全局 7.按照第六条的思路需要在页面上绑定两个事件，但实际可以整合在 '@mousedown="handleMousedown" ' 中，这里面已经绑定了一个鼠标 移入事件，因此直接在绑定一个鼠标抬起事件 'handleMousup' 8.当我们计算'leftOffset'也就是左面区域的百分比的时候，鼠标到左侧边框 距离除以整体距离，就会出现一个效果，一瞬间区域发生变化并且鼠标 在整个红色区域，为了避免这个问题定位计算的时候直接从红条中心 位置计算，对应代码地方的g公式如下: 'const offset = event.pageX - this.initOffset + this.triggerWidth / 2 - outerRect.left;' ~~~ ~~~ ~~~ >[danger] ##### 最后的封装 ~~~ 1.上面已经可以实现整体使用，但是需要注意拖拽是有限度的，因此也需要设置拖拽的最大值最小值 2.上面的代码是我们指定'leftOffset'也是百分比占比，如果让组件去控制，就要有一个问题， 当我么拖拽的时候会重新改变这个值因此就是涉及到，父传子和子传父同时出发，想同时 出发两种方法在使用组件的时候使用v-model 和 使用语法糖sync ~~~ * 在使用组件的时候 ~~~ ~~~ * 组件封装代码 ~~~ ~~~