[JavaScript知识库]踩坑记32 vue3 拖拽边缘调整侧边栏宽度 拖拽条组件 宽度限制

2021.9.28

坑93（vue3、拖拽边缘调整侧边栏宽度、拖拽条组件、宽度限制）：目标是实现可拖动调整大小的右侧边栏。

重要参考： 模板引用 | Vue.js (vuejs.org)

预计通过ref、emit实现，分离拖拽条组件和侧边栏组件。

（考虑过将拖拽条组件写在侧边栏组件内，与原侧边栏组件并列，这样就无需通过父组件获取ref，但会提示非根组件的@mousedown可能无效果）

参考：vue组件间通信六种方式（完整版） - SegmentFault 思否

Vue3.0：如何在父组件中调用ref的子组件方法 - 平民的麦田 - 博客园 (cnblogs.com)

因为左侧放置的el-table对侧栏的挤压（具体挤压情况还要看el-table中的数据量），无法随意调整侧栏大小，通过style设置的width不一定能起作用。另外非内联设置width时，style中各值是空字符串。

参考：? vue通过$ref获取不到元素样式？ - SegmentFault 思否

也有方法不受el-table影响，即同时设置style.width、style.minWidth、style.maxWidth。这样可以任意更改大小。但这样当鼠标移动到父组件外时也会无限增加宽度（减小的话减到0就小不了）。所以最好设置一下上下限。

具体代码如下：

// 目标右侧栏组件中

const editBoxRef=ref(null)

const addBoxWidth=(addWidth)=>{

? ? // ------------------------------未对宽限制大小时------------------------------

? ? // 非内联设置width时，style中各值是空字符串

? ? //?并且style.width获取的是设定宽，不一定等于offsetWidth实际宽（比如受左侧el-table挤压影响时）

?? ?editBoxRef.value.style.width=(editBoxRef.value.offsetWidth+addWidth+'px')

? ? ? ??//? 可以通过style.minWidth、style.maxWidth强制宽度大小，使其不受el-table挤压影响

?? ?// 相反，这样能挤压el-table

? ? //?editBoxRef.value.style.minWidth=(editBoxRef.value.offsetWidth+addWidth+'px')

? ? //?editBoxRef.value.style.maxWidth=(editBoxRef.value.offsetWidth+addWidth+'px')

? ? // ------------------------------对宽限制上下限，上限是浏览器窗体宽的一半------------------------------

? ? //??let targetWidth=editBoxRef.value.offsetWidth+addWidth<260 ? '260px'

?? ??? ?: editBoxRef.value.offsetWidth+addWidth>window.innerWidth/2 ? window.innerWidth/2+'px'

?? ??? ?: editBoxRef.value.offsetWidth+addWidth+'px'

? ? // 或者用封装了的函数limitNumberValue，具体实现见最下

? ? //??let targetWidth=limitNumberValue(editBoxRef.value.offsetWidth+addWidth,

????????????????{min:260,max:window.innerWidth/2})+'px'

??? //??editBoxRef.value.style.width=editBoxRef.value.style.minWidth=editBoxRef.value.style.maxWidth=targetWidth

?}

return {

?? ?editBoxRef,

? ??addBoxWidth,

}



.editBox{

? ? // 初始值

????width: 350px;

????min-width: 350px;

????max-width: 350px;

????height: 100%;

????overflow: auto;

?? ?margin-left: 2px;

}





//?dragStrip.vue 拖拽条



<template>

????<div class='dragStripBox' @mousedown="startMove"></div>

</template>





<script>

export default {

????name: 'DragStrip',

????emits:[

????????'moved'

????],

????setup(props,{ emit }){

? ? ? ??const startMove=(se)=>{

????????????let startX=se.clientX

????????????document.onmousemove=(ie)=>{

????????????????let endX=ie.clientX

????????????????let moveX=endX-startX // 左移负值，右移正值

????????????????startX=endX

????????????????emit('moved', moveX)// 发送moved事件

????????????}

????????????document.onmouseup=()=>{

????????????????document.onmousemove=document.onmouseup=null

????????????}

????????}



????????return {

????????????startMove,

????????}

????}

}

</script>





<style scoped>





.dragStripBox {

????background-color: #eeeeee;

????width: 5px;

????min-width: 5px;

????cursor: ew-resize;

????margin-left: 2px;

}





</style>



// 父组件中调用

<DragStrip @moved='handleMoved' />??

<EditBox ref='editRef' />



const editRef=ref(null)

const handleMoved=(moveX)=>{

?? ?editRef.value.addBoxWidth(-moveX)

}

写了一个工具方法，方便调用：

//? utils.js

// 限制某Number变量的最大最小值

export function limitNumberValue(number,{min,max}={}){

????if( typeof min !== 'number' || typeof max !== 'number'){

????????return number

????}

????return number<min ? min

????????: number>max ? max

????????: number

}

参考：

vue 可拖动调整宽度的侧边栏_3D的博客-CSDN博客

Vue---拖动侧边栏改变div宽度_CRUSH_BUDS的博客-CSDN博客

拖拽一侧可以改变盒子宽度或者高度，拿来即用。_段友吊缠腰的博客-CSDN博客

vue中实现拖动调整左右两侧div的宽度_小咸肉、的博客-CSDN博客_vue 拖动div宽度

vue 自定义拖拉宽度变大变小,侧栏可拖拽改变大小,右边自动适应剩余宽度写自定义目录标题_舞空~的博客-CSDN博客

by 莫得感情踩坑机(限定)