背景

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

参考自此文