[奇妙な問題] vue で複数の el-drawer がネストされたマスクの混乱を招く問題の解決策. Vue は <el-drawer> に <el-drawer> をネストするときにバグをマスクします. 問題を解決するために、単純なドロワー コンポーネントをカプセル化しました。

背景: vue プロジェクトでは、複数の el-drawer ドロワー コンポーネントが公式の組み込みマスク レイヤーにネストされており、順序が混乱しています。公式の組み込みクラスが使用されます: append-to-body="true" :
modal -append-to-body= falseが解決できなかったので
、自分でコンポーネントを定義したところ、簡単ではありますが問題は解決しました。

最終的な表示効果

解決

modal="false" を使用して公式マスクレイヤーをオフにし、el-drawer の背景色を設定して公式のものと同じ効果を実現します。

コンポーネント呼び出しのソースコード

<jw-drawer @change="change_data" :withheader="true" v-if="dialogVisible" :drawer='dialogVisible'
            size="60%" :title="dialogtitle">
            
</jw-drawer>

コンポーネントのソースコード

<template>
    <el-drawer :title="title" :visible.sync="drawer_show" :with-header="withheader" :size="size"
    
    direction="rtl" :before-close="handleClose" :style="{ right: (left==0 ? '0px':left) }" class="jwdranwer" :modal="false">
        <div class="eldrawerbody " :style="{ width: size, position: 'fixed', height: '100%' }">
            <el-button class="el_drawer_button" type="primary" icon="el-icon-close" @click="close"></el-button>
            <div class="help">
                <slot />

            </div>
        </div>

    </el-drawer>

   
</template> 
<script>
export default {
    
    
    name: 'JwDrawer',
    props: {
    
    
        title: {
    
    
            type: String,
            default: '',
        },
        size: {
    
    
            type: String,
            default: '50%',
        },
        left: {
    
    
            type: String,
            default: '0',
        },
        drawer: {
    
    
            type: Boolean,
            default: false,
        },
        withheader: {
    
    
            type: Boolean,
            default: false,
        },

    },
    data() {
    
    
        return {
    
    
            drawer_show: false
        };
    },
    created() {
    
    
        if (this.left != '0') {
    
    
                this.left = 'calc(' + this.left + ' - 350px)'
            }
        this.drawershow()
    },
    methods: {
    
    
        drawershow() {
    
    

            
            this.drawer_show = this.drawer;
        },
        handleClose(done) {
    
    
            this.$confirm('确认关闭？')
                .then(_ => {
    
    
                    this.drawer_show = false;
                    this.$emit('change', false)
                })
                .catch(_ => {
    
     })
        },
        close() {
    
    
            this.$confirm('确认关闭？')
                .then(_ => {
    
    
                    this.drawer_show = false;
                    this.$emit('change', false)
                })
                .catch(_ => {
    
     })

        }
    }
}
</script>
<style lang="scss" scoped>
.jwdranwer{
    
    
    background: rgba(1,1,1,0.5)
}
.help {
    
    
    height: calc(100% - 40px);

    .el-form {
    
    
        height: calc(100% - 60px);
        overflow: auto;
        padding: 30px;
    }
}

.el_drawer_button {
    
    
    padding: 5px;
    border-radius: 5px 0 0 5px;
    position: absolute;
    left: -36px;
    border: 0;
    top: 10%;

    ::v-deep i {
    
    
        font-size: 26px;
    }
}
</style>