UI — 正式封装
最后更新于:2022-04-02 08:09:03
[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
~~~
* 在使用组件的时候
~~~
~~~
* 组件封装代码
~~~
~~~
';
left
right