<template>
<div>
<div
class="configration mr-10"
id="configration"
@mousedown="mousedown"
>
<div class="min-h-box">
</div>
</div>
</div>
</template>
mounted() {
document.addEventListener("mouseup", this.mouseUp);
},
methods: {
mouseUp() {
document.removeEventListener("mousemove", this.mouseMove);
},
mouseMove(event) {
let configration = document.getElementById("configration");
let configValue = document.getElementById("configValue");
let dialog = document.getElementsByClassName("dialogResize")[0];
let endX = event.clientX;
//彈窗的寬度
let dialogWidth = dialog.style.width.substring(
0,
dialog.style.width.lastIndexOf("px")
);
let moveLen = this.startLeft + (endX - this.startX);
if (moveLen > 200) {
configration.style.width = moveLen + "px";
configValue.style.width = Number(dialogWidth) - moveLen + "px";
}
},
mousedown(event) {
this.startX = event.clientX;
this.startLeft = event.offsetX;
document.addEventListener("mousemove", this.mouseMove);
},
}
```
邊框拖拽功能
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 今天星期三。 今天早晨我7點(diǎn)醒了,就沒再睡回籠覺。 今天上午退休的原財(cái)務(wù)處處長(zhǎng)于姨來(lái)單位辦事,她正在給孩子辦低保,...
- 飲食壞習(xí)慣致胃脹氣 如何緩解有妙招 胃脹氣是一種較為常見的胃部疾病癥狀,主要表現(xiàn)為飽脹感,胃部外凸,常放屁,有些還...
- 今日體驗(yàn):工作是治愈一切最好的良藥,在每一件細(xì)節(jié)每一個(gè)工作中認(rèn)真對(duì)待,持續(xù)的改善,才有可能會(huì)成為跟別人完全的不同。
- 明知?jiǎng)e人是故意的,自己卻選擇原諒。對(duì)于生活中這些裝腔作勢(shì)的人,對(duì)于這些不知自己檢點(diǎn)自己的人。我們真沒必要把時(shí)間耗在...
- 《生命如花愛如蜜》發(fā)布“感念相戀”版預(yù)告片 傾心相戀 許一世安暖 2024年1月19日 攜愛而來(lái) 鐫刻傾世之戀