点击按钮，打开弹框，显示对应页面

点击按钮，打开弹框，显示对应页面

<template>
  <!-- <div>按钮</div> -->
  <span class="btnContainer">
    <el-button
      v-preventReClick
      :disabled="isDisabled"
      size="mediumTwo"
      type="primary"
      @click="handleEventQuery"
    >{{ btnName }}</el-button
    >
    <el-dialog
      v-if="diaVisible"
      :title="diaTitle || btnName"
      :visible.sync="diaVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :before-close="handleBeforeClose"
      :width="diaWidth"
      class="reset-dialog"
    >
      <component
        :is="childC"
        v-bind="$attrs"
        v-on="$listeners"
        @closeDialog="handleBeforeClose"
      />
    </el-dialog>
  </span>
</template>

<script>
export default {
  components: {
    // 事件查询
    ClaimEventQuery: resovle => {
      require([
        '@/views/claim/components/ClaimEventQuery.vue'
      ], resovle)
    }
  },
  props: {
    // 弹框标题 传了使用它，不传使用按钮名(默认不传)
    diaTitle: {
      type: String,
      default: ''
    },
    // dialog视窗宽度 可传可不传 默认
    diaWidth: {
      type: String,
      default: '85%'
    },
    // 按钮名称 必传
    btnName: {
      type: String,
      require: true,
      default: ''
    },
    // 组件名,可根据key查找引入组件 必传
    pageKey: {
      type: String,
      require: true,
      default: ''
    },
    // 按钮是否禁用
    isDisabled: {
      type: Boolean,
      default: false
    },
    // 控制dialog是否打开
    setVisabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      diaVisible: false,
      childC: '' // 需要渲染的子组件名
      // 按钮和弹框页面对应组件名
      // diaBtnConfig: [
      //   {
      //     btnName: '事件查询',
      //     pathName: 'claim',
      //     vueName: 'ClaimEventQuery'
      //   }
    }
  },
  watch: {
    setVisabled(newV) {
      this.diaVisible = newV
    },
    isDisabled(newV) {
      this.isDisabled = newV
    }
  },
  created() {
    this.childC = this.pageKey
    // this.childC = require('@/views/claim/components/' +
    //   this.diaBtnObj.childComponent).default
    // let obj = {}
    // if (this.pageKey) {
    //   obj = this.dupDiaBtnConfig.find(item => {
    //     return item.vueName === this.pageKey
    //   })
    // } else {
    //   obj = this.diaBtnConfig.find(item => {
    //     return item.btnName === this.btnName
    //   })
    // }
    // this.childC = resovle => {
    //   require([
    //     `@/views/${
    //       obj.hasOwnProperty('pathName') ? obj.pathName + '/' : ''
    //     }components/${obj.vueName}.vue`
    //   ], resovle)
    // }
    // console.log(this.$attrs, `--》${obj.vueName} 的this.$attrs`)
  },
  mounted() {},
  methods: {
    handleEventQuery() {
      this.$emit('handleEventQuery')
      if (this.setVisabled) {
        this.diaVisible = true
      } else {
        this.diaVisible = false
      }
    },
    handleBeforeClose() {
      this.diaVisible = false
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__header {
  height: 55px !important;
  line-height: 55px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid #eee !important;
  text-align: center;
}
/deep/ .el-dialog__header .el-dialog__title {
  color: black;
  font-size: 24px;
}
/deep/ .el-dialog__header .el-dialog__headerbtn {
  top: 16px;
  font-size: 22px;
}
</style>

使用

<ClaimBtn
  :msg-obj="msgObj"
  btn-name="事件查询"
  page-key="ClaimEventQuery"
  v-on="$listeners"
/>