快捷導(dǎo)航

vue中的可拖拽寬度div的實現(xiàn)示例

更新時間：2022年04月08日 09:45:03 作者：李劍一

本文主要介紹了vue中的可拖拽寬度div的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

主要思路

在需要拖拽寬度的區(qū)域設(shè)置一個div，高度設(shè)為 100%，寬度盡量窄一些(也不要太窄，3～6px左右)
在此div上綁定當(dāng)“鼠標(biāo)按下”時，觸發(fā)document綁定“鼠標(biāo)移動”方法和"鼠標(biāo)抬起"方法
通過鼠標(biāo)移動方法不斷獲取當(dāng)前鼠標(biāo)位置，設(shè)置需要變化大小div的寬高。
鼠標(biāo)抬起時取消鼠標(biāo)移動方法和鼠標(biāo)抬起方法的綁定。

<template>
? <div class="container" id="content_box">
? ? <div class="tab">左側(cè)Tab</div>
? ? <div class="menu" ref="menu">
? ? ? 左側(cè)菜單
? ? ? <div class="menu-resize" ref="menuResize"></div>
? ? </div>
? ? <div class="content">
? ? ? 中心區(qū)域
? ? ? <div class="opera" ref="opera">
? ? ? ? <div class="opera-resize" ref="operaResize"></div>
? ? ? ? 操作區(qū)域
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? name: "dropWidth",
? mounted() {
? ? this.$nextTick(() => {
? ? ? this.dropSize();
? ? })
? },
? methods: {
? ? dropSize() {
? ? ? let that = this,
? ? ? ? ? menuWidth = 200,
? ? ? ? ? operaHeight = 200;
? ? ? this.$refs.menuResize.onmousedown = function () {
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? let clientX = e.clientX;
? ? ? ? ? // 最大寬度
? ? ? ? ? if(clientX>=330){
? ? ? ? ? ? clientX = 330;
? ? ? ? ? }
? ? ? ? ? // 最小寬度
? ? ? ? ? if(clientX<=230){
? ? ? ? ? ? clientX = 230;
? ? ? ? ? }
? ? ? ? ? // TODO 這里減的是最左側(cè)tab的寬度
? ? ? ? ? menuWidth = clientX - 30;
? ? ? ? ? that.$refs.menu.style.width = clientX - 30 +"px";
? ? ? ? }

? ? ? ? document.onmouseup = function () {
? ? ? ? ? console.log('當(dāng)前寬度', menuWidth);
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? ? that.releaseCapture && that.releaseCapture()
? ? ? ? }
? ? ? }

? ? ? this.$refs.operaResize.onmousedown = function () {
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? let clientY = e.clientY;
? ? ? ? ? console.log(clientY)
? ? ? ? ? // 最大寬度
? ? ? ? ? if(clientY<=100){
? ? ? ? ? ? clientY = 100;
? ? ? ? ? }
? ? ? ? ? // 最小寬度
? ? ? ? ? if(clientY>=300){
? ? ? ? ? ? clientY = 300;
? ? ? ? ? }
? ? ? ? ? operaHeight = clientY;
? ? ? ? ? // TODO 這里需要取反向
? ? ? ? ? that.$refs.opera.style.height = 400 - clientY +"px";
? ? ? ? }

? ? ? ? document.onmouseup = function () {
? ? ? ? ? console.log('當(dāng)前寬度', operaHeight);
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? ? that.releaseCapture && that.releaseCapture()
? ? ? ? }
? ? ? }
? ? }
? }
}
</script>

<style scoped>
.container {
? width: 1000px;
? height: 400px;
? border: 2px solid #dddddd;

? display: flex;
? justify-content: center;
}

.tab {
? width: 30px;
? height: 100%;
? background-color: #EC8C32;

? flex-shrink: 0;
? flex-grow: 0;
}

.menu {
? width: 200px;
? background-color: #AAB6E0;

? flex-shrink: 0;
? flex-grow: 0;
? position: relative;
}

.content {
? width: 100%;
? position: relative;
}

.opera {
? width: 100%;
? height: 200px;
? position: absolute;
? bottom: 0;
? background-color: #F2BE25;
}

.menu-resize {
? width: 5px;
? height: 100%;

? position: absolute;
? top: 0;
? right: 0;
? cursor: col-resize;
}

.opera-resize {
? width: 100%;
? height: 5px;
? position: absolute;
? top: 0;
? left: 0;
? cursor: row-resize;
}
</style>

實現(xiàn)效果