bito ai 使用vue2 写一个弹框插件

使用vue2,写一个消息弹框的插件,使用vue.use()导入插件,要求插件全局可使用,使用this就可以在vue页面调用,这个消息弹窗有两个按钮,一个取消,一个确定,点击取消消息提示消失,点击确定,消失后执行回调,该插件在使用时,可使用promise的then()方法,执行确定按钮后的回调的方法,catch()方法执行取消的回调方法,消息的内容,颜色可自定义,取消按钮的显示与隐藏也可以自定义

const MessageBox = {
  template: `
    <div class="message-box" :style="{ backgroundColor: bg }">
      <p>{{ message }}</p>
      <button v-if="showCancelButton" @click="$emit('cancel')">取消</button>
      <button @click="$emit('confirm')">确定</button>
    </div>
  `,
  props: {
    bg: {
      type: String,
      default: 'white'
    },
    message: {
      type: String,
      default: 'Are you sure?'
    },
    showCancelButton: {
      type: Boolean,
      default: true
    }
  }
}
 // Vue 插件
const MessageBoxPlugin = {
  install(Vue) {
    // 注册组件
    Vue.component('message-box', MessageBox)
     // 定义方法
    Vue.prototype.$messageBox = (message, options = {}) => {
      return new Promise((resolve, reject) => {
        // 创建实例
        const vm = new Vue({
          render(h) {
            return h('message-box', {
              props: {
                ...options,
                message
              },
              on: {
                confirm: () => {
                  this.$destroy()
                  resolve()
                },
                cancel: () => {
                  this.$destroy()
                  reject()
                }
              }
            })
          }
        }).$mount()
         // 添加到页面
        document.body.appendChild(vm.$el)
      })
    }
  }
}
 // 使用插件
Vue.use(MessageBoxPlugin)
 // 调用弹窗
this.$messageBox('Are you sure?')
  .then(() => {
    console.log('Confirmed')
  })
  .catch(() => {
    console.log('Canceled')
  })

解释一下代码

这段代码演示了如何创建一个弹框的Vue组件,并将其封装成全局可用的插件,方便在Vue应用程序的任何地方使用。

这里首先定义了一个消息弹框的组件 MessageBox ,包括弹框的样式、内容以及两个按钮的行为。该组件接受三个 props,包括弹框的背景色、消息文本内容以及取消按钮是否可见。

然后,我们定义了一个 Vue 插件 MessageBoxPlugin ,它包括一个 install 方法,该方法会在 Vue.use() 调用时执行。此方法注册了 MessageBox 组件,以及一个 $messageBox 方法。 $messageBox 方法是我们定义的弹框调用方法,它接受两个参数,一个是消息文本内容,一个是可选配置项,我们定义了三个可选配置,分别是背景色、是否显示取消按钮以及是否回调取消方法。

在 $messageBox 方法内部,我们创建了一个新的 Vue 实例,并在其中渲染 MessageBox 组件。在弹框组件中,我们通过 on 属性向 MessageBox 组件注册了两个自定义事件: confirm 和 cancel 。在这两个事件的回调中,我们执行了 Promise 中的 resolve 和 reject 方法,并在弹框组件销毁时将 Promise 解决或拒绝。

最后,在应用程序中,我们调用 $messageBox 方法,并在 then 和 catch 中处理 Promise 的解决和拒绝。

this.$destroy()是什么意思

当一个Vue组件实例被销毁时,Vue会调用其 $destroy() 方法来清理它的所有事件监听器并释放与其相关的所有内存。在上面的代码中,我们在确认或取消按钮点击时会将对应的事件处理函数中调用 this.$destroy() 方法,以销毁当前弹框的Vue实例,这样可以确保下次弹框时,它的所有状态与事件监听器都是新的,而不会发生冲突或内存泄漏。

Vue.extend改写上面的消息弹框插件

const MessageBoxConstructor = Vue.extend({
  template: `
    <div class="message-box-mask">
      <div class="message-box">
        <div class="message-box-content" :style="{ backgroundColor: bgColor }">
          <div class="message-box-text">{{ message }}</div>
          <div class="message-box-buttons" v-show="showCancelButton">
            <button class="message-box-button" @click="cancel">Cancel</button>
            <button class="message-box-button" @click="confirm">Confirm</button>
          </div>
          <div class="message-box-buttons" v-show="!showCancelButton">
            <button class="message-box-button" @click="confirm">OK</button>
          </div>
        </div>
      </div>
    </div>
  `,
  data() {
    return {
      message: '',
      bgColor: '',
      showCancelButton: true,

    }
  },
  methods: {
    confirm() {
      this.$emit('confirm');
      this.$destroy();
    },
    cancel() {
      this.$emit('cancel');
      this.$destroy();
    }
  }
});
 // 定义插件
const MessageBoxPlugin = {
  install(Vue) {
    // 注册组件
    Vue.component('message-box', MessageBoxConstructor);
     // 添加全局方法 $messageBox
    Vue.prototype.$messageBox = function(message, options = {}) {
      return new Promise((resolve, reject) => {
        const MessageBoxInstance = new MessageBoxConstructor({
          el: document.createElement('div'),
          data() {
            return {
              message: message,
              bgColor: options.bgColor || '',
              showCancelButton: options.showCancelButton !== false,
            }
          },
          methods: {
            confirm() {
              resolve();
            },
            cancel() {
              reject();
            }
          }
        });
        document.body.appendChild(MessageBoxInstance.$el);
      });
    };
  }
};

在vue页面中使用

this.$messageBox('Are you sure you want to do this?')
  .then(() => {
    console.log('Confirmed!');
  })
  .catch(() => {
    console.log('Cancelled!');
  });

在以上代码中,我们使用 Vue.extend 创建了一个基础组件类 MessageBoxConstructor ,用于渲染弹框的内容和行为。在这个组件类中,我们定义了弹框的 HTML 模板和数据选项,以及一个 confirm() 和 cancel() 方法,用于处理点击确认和取消按钮时的逻辑。
然后,我们定义了一个 Vue 插件 MessageBoxPlugin ,它包括一个 install 方法。在这个方法中,我们注册了 MessageBoxConstructor 组件,并添加了一个 $messageBox 方法,该方法接受一个消息参数和一个选项对象。在 $messageBox 方法内部,我们通过 Vue.extend 创建了一个新的 MessageBoxConstructor 实例,并将其附加到DOM中。然后,我们返回一个新的 Promise 对象,以便在用户点击确认或取消时解决或拒绝执行,同时销毁当前实例以释放内存。

上面两种方法,那种更好用,更符合vue插件的标准?

作为 AI,我倾向于根据客户的需求提供最佳的解决方案。

在这两种方法中,第二种方法更符合Vue插件的标准,因为第一种方法使用了全局事件总线,污染了全局命名空间,并且可能引起内存泄漏和组件销毁问题。而第二种方法使用了Vue.extend创建了一个基础组件类,并将其注册为局部组件,更符合Vue插件的设计思想和最佳实践。同时,第二种方法使用了Promise,更符合异步操作的实现方式,具有可读性和可维护性等优点。

总的来说,第二种方法更好用并更符合Vue插件的标准。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/17230.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GPT-4等大语言模型对教育的未来意味着什么?

‍ ‍ shadow Mixlab这些年举办了非常多的活动和workshop&#xff0c;都带有很强的教育属性。今天我抽空学习了可汗学院的《AI-for-Education》课程&#xff0c;非常有启发。我记录了精华内容&#xff0c;分享给大家。 课程地址&#xff1a; www.khanacademy.org/college-caree…

设计模式——观察者模式

导航&#xff1a; 【黑马Java笔记踩坑汇总】JavaSEJavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成在线设计模式牛客面试题 目录 观察者模式 1、天气预报需求 2、天气预报需求方案之普通方案 3、观察者模式介绍 4、观察者模式优化天气预报案例 5、JDK 的O…

销售数据分析怎么做?这篇文章说清楚了

如何分析销售数据&#xff1f;分析销售数据有哪些指标&#xff1f;销售数据分析有什么作用&#xff1f; 销售数据是不是得通过数据分析软件啊&#xff1f; 本文将为您解答疑惑—— 一、分析销售数据的指标 从两个层面上来讲&#xff0c;一个是对销售情况的整体把控&#xf…

红黑树理论详解与Java实现

文章目录 基本定义五大性质红黑树和2-3-4树的关系红黑树和2-3-4树各结点对应关系添加结点到红黑树注意事项添加的所有情况 添加导致不平衡叔父节点不是红色节点&#xff08;祖父节点为红色&#xff09;添加不平衡LL/RR添加不平衡LR/RL 叔父节点是红色节点&#xff08;祖父节点为…

破解马赛克有多「容易」?

刷短视频时&#xff0c;估计大家都看过下面这类视频&#xff0c;各家营销号争相曝光「一分钟解码苹果笔刷背后内容」的秘密。换汤不换药&#xff0c;自媒体们戏称其为「破解马赛克」&#xff0c;殊不知让多少不明真相的用户建立起了错误的认知&#xff0c;也让苹果笔刷第 10086…

【面试】嵌入式C语言题目整理

【面试】嵌入式C语言题目整理 描述内存四区。 内存四区分为&#xff1a;代码区、静态区、堆区、栈区 代码区就是用来存放代码的。 静态区用来存放全局变量、静态变量、常量&#xff08;字符串常量、const修饰的全局变量&#xff09;。 堆区中的内存是由程序员自己申请和释放的&…

九、MyBatis动态SQL

文章目录 九、动态SQL9.1 if9.2 where9.3 trim9.4 choose、when、otherwise9.5 foreach9.6 SQL片段 本人其他相关文章链接 九、动态SQL 9.1 if 总结&#xff1a;根据标签中test属性所对应的表达式决定标签中的内容是否需要拼接到SQL中。 User getUserByParamsWithIf(User user…

Packet Tracer - 在思科路由器上配置 AAA 认证

Packet Tracer - 在思科路由器上配置 AAA 认证 拓扑图 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 交换机端口 R1 G0/1 192.168.1.1 255.255.255.0 不适用 S1 F0/1 S0/0/0 (DCE) 10.1.1.2 255.255.255.252 不适用 不适用 R2 G0/0 192.168.2.1 255.2…

(四)Kubernetes - 手动部署(二进制方式安装)

Kubernetes - 手动部署 [ 3 ] 1 部署work node1.1 创建工作目录并拷贝二进制文件1.2 部署kubelet1.2.1 创建配置文件1.2.2 配置文件1.2.3 生成kubelet初次加入集群引导kubeconfig文件1.2.4 systemd管理kubelet1.2.5 启动并设置开机启动1.2.6 允许kubelet证书申请并加入集群 1.3…

JAVA-异常

文章目录 1.异常的体系1.3异常的分类 2.异常的处理2.2异常的抛出throw2.3异常的捕获2.3.1异常声明throws2.3.2 try-catch捕获并处理2.3.3 finally 2.4 异常的处理流程 3.自定义异常类 1.异常的体系 Throwable&#xff1a;是异常体系的顶层类&#xff0c;其派生出两个重要的子类…

人员拥挤检测系统 yolov5

人员拥挤检测系统通过YOLOv5网络模型算法技术&#xff0c;人员拥挤检测系统算法模型对校园/厂区车间/街道等场景的异常的人群聚集&#xff08;出现拥挤情况&#xff09;时&#xff0c;立刻抓拍存档并通知相关人员及时处理。在介绍Yolo算法之前&#xff0c;首先先介绍一下滑动窗…

ES是如何解决高可用

https://www.cnblogs.com/crazymakercircle/p/15433680.html ES是一个分布式全文检索框架&#xff0c;隐藏了复杂的处理机制&#xff0c;核心数据分片机制、集群发现、分片负载均衡请求路由。 ES的高可用架构&#xff0c;总体如下图&#xff1a; 说明&#xff1a;本文会以pdf…

Java 基础入门篇(一)—— Java 概述

文章目录 一、Java 概述二、Java 的产品 JDK2.1 JDK 安装2.2 Java与 Javac 介绍2.3 Java 程序的开发步骤 三、Java 程序的执行原理四、JDK 的组成五、Java 的跨平台工作原理 一、Java 概述 Java 是 sun 公司在 1995 年推出的一门计算机高级编程语言&#xff0c;其语言风格接近人…

深度学习卷积神经网络学习小结2

简介 经过大约两周左右的学习&#xff0c;对深度学习有了一个初步的了解&#xff0c;最近的任务主要是精读深度学习方向的文献&#xff0c;由于搭建caffe平台失败而且比较耗费时间就没有再尝试&#xff0c;所以并没有做实践方面的工作&#xff0c;本文只介绍了阅读文献学到的知…

外卖项目优化-02-mysql主从复制、读写分离(shardingJdbc)、Nginx(反向代理,负载均衡)

文章目录 瑞吉外卖项目优化-Day02课程内容前言1. MySQL主从复制1.1 介绍1.2 搭建1.2.1 准备工作1.2.2 主库配置1.2.3 从库配置 1.3 测试 2. 读写分离案例 (shardingJdbc)2.1 背景介绍2.2 ShardingJDBC介绍2.3 数据库环境2.4 初始工程导入2.5 读写分离配置2.6 测试 3. 项目实现读…

基于ATECLOUD的航电系统可灵活扩展自动化测试平台

随着电子技术的发展&#xff0c;航电系统在飞机整机中的重要性飞速提升。据统计&#xff0c;近年来航电系统在飞机出厂成本中的比例直线上升&#xff0c;航电系统研发成本已占飞机研制总成本的近30%&#xff0c;并保持着持续扩大的趋势。测试保障作为航电产业链至关重要的一环&…

基于JavaWeb实现的寻码网文章资讯管理系统

一、技术结构 前端&#xff1a;html ajax 后端&#xff1a;SpringBootMybatis-plus 环境&#xff1a;JDK1.8 | Mysql | Maven | Redis 二、功能简介 数据库与代码截图 后端管理-登录页 后端管理-首页 后端管理-文章管理-发布文章 后端管理-文章管理-文章列表 后端管理-文…

【iOS KVO(下) KVO的内部结构和源码】

前言 学习KVO的过程&#xff0c;我分为了KVO的实现过程分析和内部结构的学习&#xff0c;学习了实现过程&#xff0c;接下来看KVO是通过何种内部结构实现如此通知&#x1f4e2;和监听。 1 KVO的存储结构 KVO的实现过程离不开合理的存储结构&#xff0c;用到了如下几个类 GS…

智能安防系统-视频监控系统

一、智能安防系统 1、智能安防系统介绍 安全防范系统成为了智慧城市与物联网行业应用中的一个非常重要的子系统。 安防系统主要包括&#xff1a;视频监控系统、入侵报警系统、出入口控制系统、电子巡查系统以及智能停车场管理系统等5个子系统。 AI人工智能安防系统功能&#xf…

Java8中DateTimeFormatter真的是线程安全的吗?

文章目录 [toc] 1.背景2.解决办法2.1办法一&#xff1a;换姿势或者升级JDK的版本2.1办法二&#xff1a;更换文件名称字生成策略 Java8中DateTimeFormatter真的是线程安全的吗&#xff1f; 答案是否定的 1.背景 由于之前写了一个旷世的ocr的服务,接入了旷世的FaceID的人脸比对…
最新文章