Vue 自定义模态框

发布于 2024-11-05 00:41:35 字数 2300 浏览 2 评论 0

模框组件

// MyModal.vue
<template>
  <div class="dialog">
    <slot name="content"></slot>
    <div class="btn-group">
      <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
      <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyModal",
  props: {
    dialogOption: Object
  },
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "" //保存 promise 对象
    };
  },
  computed: {
    modal() {
      let option = this.dialogOption;
      return {
        cancelButtonText: option.cancelButtonText
          ? option.cancelButtonText
          : "取消",
        confirmButtonText: option.confirmButtonText
          ? option.confirmButtonText
          : "确定"
      };
    }
  },
  methods: {
    //确定,将 promise 断定为完成态
    submit() {
      this.resolve();
    },
    // 取消,将 promise 断定为 reject 状态
    cancel() {
      this.reject();
    },
    //显示 confirm 弹出,并创建 promise 对象,给父组件调用
    cb() {
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise; //返回 promise 对象,给父级组件调用
    }
  }
};
</script>

父组件

// app.vue
<template>
  <div>
    <button @click="open">打开模态框</button>
    <!-- 自定义模态框组件 -->
    <my-modal :dialogOption="dialogOption" v-show="isShow" ref="dialog">
      <div slot="content">
        <span>插入新内容</span>
      </div>
    </my-modal>
  </div>
</template>

<script>
import MyModal from "./components/MyModal.vue";
export default {
  name: "app",
  components: {
    MyModal
  },
  data() {
    return {
      isShow: false,
      dialogOption: {
        cancelButtonText: "取消",
        confirmButtonText: "确定"
      }
    };
  },
  methods: {
    open() {
      this.isShow = true;
      this.$refs.dialog
        .cb()
        .then(() => { // 传到 MyModal 中的回调函数
          this.isShow = false;
        })
        .catch(() => {  // 传到 MyModal 中的回调函数
          this.isShow = false;
        });
    }
  }
};
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

烂柯人

暂无简介

0 文章
0 评论
22 人气
更多

推荐作者

emdigitizer10

文章 0 评论 0

残龙傲雪

文章 0 评论 0

奢望

文章 0 评论 0

微信用户

文章 0 评论 0

又爬满兰若

文章 0 评论 0

独孤求败

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文