vue封装el-dialog为公用组件时控制打开关闭的方法

1. 在我们封装的组件中加入变量visible与关闭函数

<el-dialog
      title="文件详情"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
    //加入你要编写的内容
</el-dialog>

export default {
  props: {
    dialogFlag: {
      default: false,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  watch: {
    dialogFlag() {
      this.visible = this.dialogFlag;
    },
  },
  methods: {
    dialogClose() {
      this.$emit("update:dialogFlag", false);
    },
  },
};

2. 在父组件中引用时

<span class="file-list__detail" @click="dialogFlag=true">查看</span>
<dialog-demo :dialogFlag.sync="dialogFlag"></dialog-demo>

这样就可以在控制封装好的对话框的显示和关闭了