Vuejs 드래그 를 통 해 요소 폭 을 바 꾸 어 자가 적응 을 실현 합 니 다.
5313 단어 Vuejs드래그원소스스로 적응 하 다
원리:
드래그 효과 의 실현 은 기본적으로 dom 작업 으로 이 루어 집 니 다.드래그 구분자,구분자 와 브 라 우 저 테두리 의 거리(left)를 계산 하여 드래그 후의 서로 다른 너비 의 계산 을 실현 합 니 다.구분자 1 을 드래그 할 때 요소 상자 left 와 mid 를 계산 합 니 다.구분자 2 를 드래그 할 때 요소 상자 mid 와 right 를 계산 합 니 다.원소 상자 가 끌 리 지 않도록 원소 상자 의 최소 값 을 설정 합 니 다.SetCapture()와 ReleaseCapture()의 함수 기능 을 사용 하여 지정 한 창 에 마우스 캡 처 를 설정 합 니 다.
html 부분 코드:
<template>
<div>
<ul class="box" ref="box">
<li class="left" ref="left"> </li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid"> 2</li>
<li class="resize2" ref="resize2"></li>
<li class="right" ref="right">test</li>
</ul>
<ul class="box" ref="box">
<li class="left" ref="left"> </li>
<li class="resize" ref="resize"></li>
<li class="mid" ref="mid"> </li>
<li class="resize2" ref="resize2"></li>
<li class="right" ref="right">test</li>
</ul>
</div>
</template>
js 부분 코드:
<script>
export default {
mounted () {
this.dragControllerDiv();
},
methods: {
dragControllerDiv: function () {
var resize = document.getElementsByClassName('resize');
var resize2 = document.getElementsByClassName('resize2');
var left = document.getElementsByClassName('left');
var right = document.getElementsByClassName('right');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
for (let i = 0; i < resize.length; i++) {
resize[i].onmousedown = function (e) {
var startX = e.clientX;
resize[i].left = resize[i].offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var rightW = right[i].offsetWidth;
var moveLen = resize[i].left + (endX - startX);
var maxT = box[i].clientWidth - resize[i].offsetWidth;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
resize[i].style.left = moveLen;
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';
}
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture();
}
resize[i].setCapture && resize[i].setCapture();
return false;
}
}
for (let i = 0; i < resize2.length; i++) {
resize2[i].onmousedown = function (e) {
var startX = e.clientX;
resize2[i].left = resize2[i].offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var leftW = left[i].offsetWidth;
var moveLen = resize2[i].left + (endX - startX) - leftW;
var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
resize2[i].style.left = moveLen;
for (let j = 0; j < right.length; j++) {
mid[j].style.width = moveLen + 'px';
right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px';
}
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize2[i].releaseCapture && resize2[i].releaseCapture();
}
resize2[i].setCapture && resize2[i].setCapture();
return false;
}
}
}
}
}
</script>
style 부분:
<style scoped>
ul,li{
list-style: none;
display: block;
margin:0;
padding:0;
}
.box{
width:800px;
height:32px;
overflow:hidden;
}
.left{
width:calc(30% - 10px);
height:100%;
background:skyblue;
float:left;
}
.resize{
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
.resize2{
width:5px;
height:100%;
cursor: w-resize;
float:left;
}
.right{
float:left;
width:35%;
height:100%;
background:tomato;
}
.mid{
float:left;
width:35%;
height:100%;
background:#f00;
}
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.