el-dialog element-ui弹窗

bulkImport.vue  自定义组件

<template>
  <el-dialog :visible="modalVisible" title="批量导入" centered @close="$emit('close')" :fullscreen="true">
    <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', {'aa':111,'bb':222});
    },
    closeModal() {
      this.$emit('close');
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>

<style lang="less" scoped>

</style>

================================================================

调用页面：

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

<script>
    //import bulkImport from '@/components/bulkImport.vue';
    import bulkImport from '../../components/bulkImport.vue';
    export default {
      props: {
        // modal是否可见
        modalVisible: {
          type: Boolean,
          default: false,
        },
      },
      components: {
        bulkImport,
      },
      data() {
        return {
          bulkImportVisible: false,
        };
      },
      methods: {
        addTags() {
          // 打开弹窗
          this.bulkImportVisible = true;
        },
        onBulkImport(e) {
            uni.showToast({
                title:JSON.stringify(e),
                icon: 'none',
                duration: 5000
            })
          console.log(e);  // 11
          // 关闭弹窗
          this.bulkImportVisible = false;
        },
      },
      watch: {},
      computed: {},
      mounted() {},
    };
</script>

<style>
</style>