vue3.0+element plus 的el-container中,el-aside可以拖拽的方法(drag)
首先在setup中定义一个类
const widthData=reactive({ with:500 });
然后编写方法:
const updateWidth=()=>{ let resize= document.getElementById("asideId"); console.log(resize); resize.onmousedown = function(e) { // resize.style.background = "#818181"; let startX = e.clientX; // resize.left = resize.offsetLeft; document.onmousemove = function(e) { let endX = e.clientX; let moveLen = endX - startX; startX = endX; widthData.with += moveLen; }; document.onmouseup = function() { // 颜色恢复 resize.style.background = ""; document.onmousemove = null; document.onmouseup = null; }; return false; }; }
然后在onMounted中调用方法
最后在el-aside中加入id="asideId" :width="widthData.with+'px'" 绑定即可