0%

ElementUI 抽屉内选中文本,鼠标不小心移到遮罩层后,遮罩层被意外关闭解决方式

Element-UI 抽屉组件 Drawer 有个 BUG

就是在抽屉内容区选中文字,然后不松手,然后移动鼠标到弹窗外,却触发了隐藏逻辑。

正确的交互应该是:选中文字不松手,鼠标移动到弹窗外不触发隐藏逻辑,平时点击弹窗外可以触发隐藏逻辑。

设置一下 :wrapper-closable="false"

1
2
3
4
5
6
7
8
9
10
11
12
<el-drawer
v-bind="$attrs"
class="translation"
:with-header="false"
size="450px"
:wrapper-closable="false"
v-on="$listeners"
@mousedown.native="handleWrapperMousedown"
@mouseup.native="handleWrapperMouseup"
>
我被选中拉
</el-drawer>

重点是鼠标按下 @mousedown.native="handleWrapperMousedown" 鼠标弹起 @mouseup.native="handleWrapperMouseup" 这两个逻辑

1
2
3
4
5
6
7
8
9
10
11
12
handleWrapperMousedown (e) {
this.classmodel = !!e.target.classList.contains('el-drawer__container')
},
handleWrapperMouseup (e) {
if ((!!e.target.classList.contains('el-drawer__container')) && this.classmodel) {
console.log(`editdrawer`, false)
this.$emit('update:visible', false)
} else {
console.log(`editdrawer`, true)
}
this.classmodel = false
}

转载