版权属于:
Ginkgo
本文链接:
https://www.imao2.com/article/153.html(转载时请注明本文出处及文章链接)
作品采用:
看了 elementui 和 iview,都有这个问题。
在 drawer 抽屉组件中复制的时候,鼠标移动的快了就会移动到抽屉外,此时抽屉弹窗就关闭了,这个交互不想要,希望在点击遮罩的时候再关闭。
<template>
...
<el-drawer title="标题"
:append-to-body="true"
:visible.sync="drawer"
custom-class="drawer-test"
direction="rtl"
:destroy-on-close="true"
@mousedown.native="mousedownDrawer($event)"
@mouseup.native="mouseupDrawer($event)">
</el-drawer>
...
</template>
<script>
export default {
data() {
return {
drawer: false,
classModel: false
}
},
methods: {
//监测Drawer鼠标事件
mousedownDrawer(e) {
// 如果为true,则表示点击发生在遮罩层
//判断事件的目标元素是否具有el-drawer__container类。如果具有该类,则classmodel变量的值将设置 为true;如果不具有该类,则classmodel变量的值将设置为false。
this.classModel = !!e.target.classList.contains('el-drawer__container');
},
mouseupDrawer(e) {
if (!!e.target.classList.contains('el-drawer__container') && this.classModel) {
// 点击发生在遮罩层且之前发生过 mousedown 事件,关闭抽屉
this.drawer = false;
} else {
// 点击发生在抽屉内容区域,保持抽屉打开
this.drawer = true;
}
this.classModel = false;
}
}
}
</script>