el-popover嵌套el-dialog冲突问题

el-popover嵌套使用el-dialog时问题

使用场景：点击图标出现el-popoverel-popover内有个输入框，点击输入框出现el-dialog。该功能是个公共组件，为了演示直接把组件放到一起

代码如下：

<template>
    <el-popover id="popover" ref="myPopover" v-model="visible" popper-class="tableSearchPopover" style="padding-bottom: 0px" placement="bottom" :width="width" :trigger="trigger">
      <!-- el-input -->
      <el-input v-model="name" placeholder="请选择" :readonly="true" class="input-with-select" @focus="showUserSelect" size="mini">
          <el-button slot="append" size="mini" : icon="el-icon-search" @click="showUserSelect" />
       </el-input>
      <!-- el-dialog -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" > 
          ...
       </el-dialog>
      <div style="float: right">
        <el-button type="text" @click="search">筛选</el-button>
        <el-电击tton type="text" @click="refresh">重置</el-button>
      </div>
      <i slot="reference" class="vxe-icon-search" :style="getColor()" @click="click" />
    </el-popover>
</template>

上面这种用法会导致出现2种问题：
1、el-dialog会被自身遮罩层遮挡
2、点击el-dialog任何地方会导致el-popover隐藏

针对上面两种问题需要再el-dialog 上设置 :appendToBody="false" :modal="false"

<!-- el-dialog -->
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%"  :appendToBody="false" :modal="false"> 
  ...
</el-dialog>

element 官方api

完整代码：

<template>
    <el-popover id="popover" ref="myPopover" v-model="visible" popper-class="tableSearchPopover" style="padding-bottom: 0px" placement="bottom" :width="width" :trigger="trigger">
      <el-input v-model="name" placeholder="请选择" :readonly="true" class="input-with-select" @focus="showUserSelect" size="mini">
          <el-button slot="append" size="mini" : icon="el-icon-search" @click="showUserSelect" />
       </el-input>
      <!-- el-dialog -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :appendToBody="false" :modal="false"> 
          ...
       </el-dialog>
      <div style="float: right">
        <el-button type="text" @click="search">筛选</el-button>
        <el-button type="text" @click="refresh">重置</el-button>
      </div>
      <i slot="reference" class="vxe-icon-search" :style="{color: '#c0c4cc',cursor: 'pointer'}" />
    </el-popover>
</template>

export default {
  name: 'FilterSearch',
  props: {
    trigger: {
      type: String,
      default: 'click'
    },
    width: {
      type: String,
      default: '250'
    }
  },
  data() {
    return {
      visible: false,
      dialogVisible:false,
      name:''
    }
  },
  mounted() {},
  methods: {
    // 筛选
    search() {
      this.$emit('search')
      this.visible = false
    },
    // 重置
    refresh() {
      this.$emit('refresh')
    },
    showUserSelect(){
        this.dialogVisible = true
    }
  }
}