首先在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'" 綁定即可