elementui中 drawer 组件非正常关闭问题

26482-is1iosbn43q.png

背景

看了 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>

参考自此文

版权属于:

Ginkgo

本文链接:

https://imao2.com/article/153.html(转载时请注明本文出处及文章链接)

Ginkgo

一个今天胜过两个明天。

30 文章
0 评论
5 分类

标签云