el-dialog 使用时出现的问题

1. 'visble'父子通信状态报错

在el-dialog标签里添加 :visible.sync = "dialogVisble"

2. 如果出现v-modal遮罩导致取消及确定按钮无法被点击

在el-dialog标签里添加 :modal="false"

全部代码

dialog子组件

<template> 
<el-dialog 
    title="提示" 
    :visible.sync="dialogVisble" 
    :modal="false" 
    :before-close="close"
    width="60%" 
> 
    <span>这是主体文字</span> 
    <span slot="footer" class="dialog-footer"> 
    <el-button @click="close">取 消</el-button> 
    <el-button type="primary" @click="submit">确 定</el-button> 
    </span> 
</el-dialog> 
</template>
<script> 
export default { 
    props: ['dialogVisble'], 
    methods: { 
        close() { this.$emit('close') }, 
        submit() { this.close() } } 
    }
</script>

父组件

<template> 
<CatalogDialog 
    :dialogVisble= visibleCatalog
    @close="visibleCatalog = false"
> 
</CatalogDialog > </template>
<script> 
import CatalogDialog  from "./dialog/CatalogDialog "
export default { 
    components: { CatalogDialog }, 
    data() {
      visibleCatalog  = false   
    },   </script>