<!-- 使用方法 样例 -->
<template>
  <div class="trigger_dialog">
    <!-- 触发弹窗操作  -->
    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
    <!-- 弹窗组件 -->
    <DialogWrapper
      v-if="dialogVisible"
      dialog-title="触发对话框"
      :visible.sync="dialogVisible"
      :popup-width="'35%'"
      @handleClose="handleClose"
      @submitDialogData="submitDialogData"
    >
      弹窗内容
    </DialogWrapper>
  </div>
</template>

<script>
export default {
  components: {
    // 弹窗引入，如注册全局组件则克直接使用
    DialogWrapper: () => import('./DialogWrapper.vue')
  },
  props: {},
  data() {
    return {
      dialogVisible: false // 弹框状态
    }
  },
  computed: { },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /* 弹窗 修改是否让页面显示与隐藏的事件 */
    updateVisible(val) {
      this.dialogVisible = val
    },
    /* 弹窗 确认 操作 */
    submitDialogData() {
      this.dialogVisible = false
    },
    /* 弹窗 关闭 操作 */
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
