Element-UI 抽屉组件 Drawer 有个 BUG
就是在抽屉内容区选中文字，然后不松手，然后移动鼠标到弹窗外，却触发了隐藏逻辑。
正确的交互应该是：选中文字不松手，鼠标移动到弹窗外不触发隐藏逻辑，平时点击弹窗外可以触发隐藏逻辑。
设置一下 :wrapper-closable="false"
<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" 这两个逻辑
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
}