MessageBox的模版语法上如何注册事件

news2024/10/6 0:02:07

目标:

想要在MessageBox中的文本中写一些事件,如何处理

在这里插入图片描述

在vue中进行操作:

coding

// 弹窗提示
this.$confirm({
  customClass: "add-fail",
  title: this.$t('add_error'),
  type: 'error',
  dangerouslyUseHTMLString: true, // 将消息使用html渲染
  message: `<p>${this.$t('fail')}<span οnclick='routerJump()'>${this.$t('readd')}</span></p>`,
  buttons: [{ name: this.$t('close'), action: 'cancel' }]
});

  mounted () {
    window.routerJump = this.routerJump; // 确保在模版上的事件可以执行
  },
  beforeDestroy() {
    delete window.routerJump;
  },

methods: {
   routerJump() {
      // 获取 messageBox DOM 后移除,清除上次的(只是被隐藏并未被销毁)
      let el_message_box = document.querySelector('.el-message-box__wrapper');
      let v_modal = document.querySelector('.v-modal');
      if (el_message_box && v_modal) {
        el_message_box.parentNode.removeChild(el_message_box);
        v_modal.parentNode.removeChild(v_modal);
      }
      MessageBox.close();
      router({
        name: 'record',
        params: {pageType: 'add', serverType: 1}
      });
    }
}


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

21-22 - 线性表的链式存储结构 单链表的具体实现

---- 整理自狄泰软件唐佐林老师课程 文章目录 1. 线性表的链式存储结构1.1 定义1.2 逻辑结构1.3 专业术语的统一 2. 链表的基本概念2.1 单链表中的结点定义2.2 单链表中的内部结构2.3 在目标位置处插入数据元素2.4 在目标位置处删除数据元素 3. 链式存储结构线性表的实现3.1 设…

Git-Gitlab中如何创建项目、创建Repository、以及如何删除项目

目录 概念过程创建项目创建Repository创建分支使用IDEA删除项目 git常用命令基础命令拉取远程代码方式一拉取远程代码方式二 概念 GitLab是一个基于Git的版本控制系统&#xff0c;它提供了一个Web界面&#xff0c;可以让用户更方便地进行代码管理、版本管理、协作开发等工作。G…

嵌入式物联网实战开发笔记-乐鑫ESP32开发环境ESP-IDF搭建【doc.yotill.com】

乐鑫ESP32入门到精通项目开发参考百例下载&#xff1a; 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;4e33 3.1 ESP-IDF 简介 ESP-IDF&#xff08;Espressif IoT Development Framework&#xff09;是乐鑫&#xff08;Espressif Systems&#xff09;为 ESP 系列…

云计算时代,企业面临的云安全风险

如今&#xff0c;随着云计算等新兴科技的发展&#xff0c;不同类型企业间的关联越来越多&#xff0c;它们之间的业务边界已被打破&#xff0c;企业上云成为了大势所趋。云计算应用帮助企业改变了IT资源不集中的状况&#xff0c;同时&#xff0c;数据中心内存储的大量数据信息&a…

R语言使用sjPlot包优雅绘制回归模型的交互效应图

交互作用效应(p for Interaction)在SCI文章中可以算是一个必杀技&#xff0c;几乎在高分的SCI中必出现&#xff0c;因为把人群分为亚组后再进行统计可以增强文章结果的可靠性&#xff0c;进行可视化后可以清晰的表明变量之间的关系。不仅如此&#xff0c;交互作用还可以使用来进…

劳保工具佩戴监测识别摄像机

随着工业生产技术的不断进步和劳动保护意识的提高&#xff0c;劳保工具的佩戴已成为维护工人安全健康的重要环节。为了更好地监测和识别工人是否正确佩戴劳保工具&#xff0c;以及工作场所是否存在安全隐患&#xff0c;智能劳保工具佩戴监测识别摄像机应运而生。这种摄像机结合…

GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程

目录 ⛳️推荐 1. 安装配置GoLand 2. 服务器开启SSH服务 3. GoLand本地服务器远程连接测试 4. 安装cpolar内网穿透远程访问服务器端 4.1 服务器端安装cpolar 4.2 创建远程连接公网地址 5. 使用固定TCP地址远程开发 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&am…

C语言 | Leetcode C语言题解之第49题字母异位词分组

题目&#xff1a; 题解&#xff1a; /*1.将字符串原串与副本进行绑定成一个节点2.对字符串副本进行按ascii码表进行从小到大排序3.按照字符串进行比较排序4.合并 */ typedef struct Node{char*s;char*s_vice;int len; }Node;void sortShellChar(char*s,int len){for(int dista…

推荐3个视频转文字的工具

如果是长视频转文字的话&#xff0c;我会推荐你三个专业的能够将视频文字提取出来的工具&#xff0c;操作无门槛&#xff0c;转换出的文字准确率高&#xff0c;可以直接导出文字。 1.一键识别王 https://www.xunjiepdf.com/yijianshibiewang 专业的图片文字识别软件&#xff0…

依赖型人格的症状和起因,依赖型人格测试和应对方法

每个人的性格不同&#xff0c;对待同一件事的处理方式也不一样&#xff0c;很多人在独自面对某些事情的时候&#xff0c;会有非常明显的无助感和孤独感&#xff0c;他们没办法照顾自己&#xff0c;也无法独立作出决定&#xff0c;只能依赖别人。 这种过度依赖的特质就是依赖型…

LT8711UXD助力新款Swtich游戏机底座《4K/60HZ投屏方案》

Nintendo Switch&#xff08;OLED版&#xff09;正面搭载了一块分辨率为720P的7.0英寸OLED屏幕&#xff1b;具有白色和电光蓝电光红2种颜色&#xff1b;机身长度102毫米&#xff0c;宽度242毫米&#xff0c;厚度13.9毫米&#xff0c;重量约420克。 [2]Nintendo Switch&#xff…

《架构风清扬-Java面试系列第26讲》聊聊的LinkedBlockingQueue的特点及使用场景

LinkedBlockingQueue也是BlockingQueue接口的一个实现类之一 这个属于基础性问题&#xff0c;老规矩&#xff0c;我们将从使用场景和代码示例来进行讲解 来&#xff0c;思考片刻&#xff0c;给出你的答案 1&#xff0c;使用场景 实现&#xff1a;基于链表实现的阻塞队列&#…

后端工程师——Java工程师面试小结

在国内,Java 程序员是后端开发工程师中最大的一部分群体,其市场需求量也是居高不下,C++ 程序员也是热门岗位之一,此二者的比较也常是热点话题,例如新学者常困惑的问题之一 —— 后端开发学 Java 好还是学 C++ 好。读完本文后,我们可以从自身情况、未来的发展,岗位需求量…

Windows安装Elasticsearch 7.9.2

1 下载 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.9.2-windows-x86_64.zip 2 配置 进入config目录&#xff0c;打开elasticsearch.yml文件&#xff0c;给集群和节点配置名称。 cluster.name: my-es node.name: node-1 3 启动 打开bin目录&am…

​第三方支付方式有哪些?

​第三方支付方式有哪些&#xff1f; 编辑搜图 请点击输入图片描述&#xff08;最多18字&#xff09; 随着电子商务和移动互联网的快速发展&#xff0c;第三方支付方式已经成为我们生活中不可或缺的一部分。这些支付方式不仅为我们提供了方便快捷的交易途径&#xff0c;还在保…

iOS - 多线程-atomic

文章目录 iOS - 多线程-atomic1. 源码分析1.1 get方法1.2 set方法 2. 一般不使用atomic的原因 iOS - 多线程-atomic atomic用于保证属性setter、getter的原子性操作&#xff0c;相当于在getter和setter内部加了线程同步的锁可以参考源码objc4的objc-accessors.mm它并不能保证使…

为AI电脑生态注入强悍动力,安耐美PlatiGemini 1200W高性能电源

在DIY攒机的过程中&#xff0c;电源是非常重要的一环&#xff0c;现在高性能的硬件功耗往往很高&#xff0c;因此一款优秀的电源整个系统稳定运行的基石。最近&#xff0c;我发现一款由安耐美&#xff08;Enermax&#xff09;推出的PlatiGemini 1200W电源&#xff0c;它不仅满足…

报错import build constraints exclude all Go files in

好久没用fyne突然报错 报错import ...go-gl.. build constraints exclude all Go files in go-gl .. 检查gcc --version正常输出 检查gcc版本正常&#xff0c;路径正常。 尝试解决的方法&#xff0c; 1.重新安装依赖&#xff0c;不行 2.重新配置下载地址&#xff0c;不…

警惕高薪诱惑,跳槽前必看的真相

在职场中&#xff0c;高薪常常被看做是衡量一份工作价值的标尺。不少求职者和职场人士在面对职业选择时&#xff0c;会将薪资待遇作为重要甚至决定性的参考因素。然而&#xff0c;盲目追求高薪而轻易跳槽&#xff0c;并非总是明智之举。今天&#xff0c;我们就来探讨一下为何“…

【Vue】自定义事件实现组件之间的通信(案例讲解)

一、前言 这是部分哔哩哔哩上跟着一个博主【遇见狂神说】学习的&#xff0c;当然自己也是才开始学习的vue&#xff0c;在学到这个Vue的自定义事件的时候&#xff0c;虽然知识点很绕&#xff0c;但是在理解后又觉得很意思&#xff0c;觉得Vue真的很强大。这里博主将自己学习到的…