【Vue】基于 element-ui 封装弹窗

• 弹窗封装：

<template>
  <el-dialog :visible="modalVisible" title="批量导入" centered @close="$emit('close')">
    <span>弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeModal">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // modal是否可见
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    onConfirm() {
      this.$emit('bulkImport', 11);
    },
    closeModal() {
      this.$emit('close');
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>

<style lang="less" scoped>

</style>

• 使用弹窗：

<template>
  <el-button type="primary" @click="addTags()">批量导入</el-button>
  <!-- 批量导入 -->
  <bulkImport
  	@bulkImport="onBulkImport"
  	@close="() => (bulkImportVisible = false)"
    :modalVisible="bulkImportVisible"
  />
</template>

<script>
import bulkImport from './bulkImport';

export default {
  props: {
    // modal是否可见
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    bulkImport,
  },
  data() {
    return {
      bulkImportVisible: false,
    };
  },
  methods: {
    addTags() {
      // 打开弹窗
      this.bulkImportVisible = true;
    },
    onBulkImport(e) {
      console.log(e);  // 11
      // 关闭弹窗
      this.bulkImportVisible = false;
    },
  },
  watch: {},
  computed: {},
  mounted() {},
};
</script>

<style lang="less" scoped>

</style>

• 效果图：