当前位置:首页 > 编程笔记 > 正文
已解决

el-dialog element-ui弹窗

来自网友在路上 160860提问 提问时间:2023-11-21 01:45:19阅读次数: 60

最佳答案 问答题库608位专家为你答疑解惑

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>

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"el-dialog element-ui弹窗":http://eshow365.cn/6-40780-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!