vue 基于elementUI/antd-vue, h函数实现message中嵌套链接跳转到指定路由 (h函数点击事件的写法)

news2024/10/6 2:28:21

效果如图:

点击message 组件中的 工单管理, 跳转到工单管理页面。

以下是基于vue3 + antd-vue

代码如下:

import { message } from 'ant-design-vue';
import { h, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const showSuccessMessage = () => {
  message.success(() =>
    h('span', {}, [
      '提交成功,请到',
      h(
        'span',
        {
          style: {
            color: '#4BB1E9',
            cursor: 'pointer'
          },
          onClick() {
            goWorkOrder();
          }
        },
        ' 工单管理 '
      ),
      '中及时关注工单状态!'
    ])
  );
};

// 去工单管理
const goWorkOrder = () => {
  router.push('/operations/workManagement/devicePowerOff');
};

点击事件直接用onClick即可。

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

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

相关文章

智慧公厕对于智慧城市管理的意义

近年来,智慧城市的概念不断被提及,而智慧公厕作为智慧城市管理的重要组成部分,其在监测、管理和养护方面发挥着重要的作用。智慧公厕不仅是城市市容提升的重要保障,还能提升城市环境卫生管理的质量,并有效助力创造清洁…

代码+视频,R语言使用BOOT重抽样获取cox回归方程C-index(C指数)可信区间

bootstrap自采样目前广泛应用与统计学中,其原理很简单就是通过自身原始数据抽取一定量的样本(也就是取子集),通过对抽取的样本进行统计学分析,然后继续重新抽取样本进行分析,不断的重复这一过程N&#xff0…

python redis中blpop和lpop的区别

python redis中lpop()方法是获取并删除左边第一个对象。 def lpop(self,name: str,count: Optional[int] None,) -> Union[Awaitable[Union[str, List, None]], Union[str, List, None]]:"""Removes and returns the first elements of the list name.By de…

Java在线租车汽车租赁系统设计与实现(Idea+Springboot+mysql)

博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

17 deque

容器适配器 适配器 适配器是一种射击模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结),该种模式是将一个类的接口转换成客户希望的另一个接口 STL库中的stack和queue的结构 虽然stack和queue也可以存放元素,但…

【STL】deque双端开口容器

1.关于deque容器说明 deque容器与vector容器差不多,但deque是双端开口容器,可以在两端插入和删除元素 push_front( )//在头部插入push_back( )//在尾部插入pop_front( )//在头部删除pop_back( ) //在尾部删除 其他相应函数与vector差不多,…

2024 年(第 12 届)“泰迪杯”数据挖掘挑战赛—— C 题:竞赛论文的辅助自动评阅完整思路与源代码分享

一、问题背景 近年来我国各领域各层次学科竞赛百花齐放,层出不穷,学生参与度也越来越高。随着参赛队伍的增 加,评阅论文的工作量急剧增加,这对评阅论文的人力要求也越来越大。因此引入机器辅助评阅成为竞赛主办方的现实需求。 在…

AI智能客服的开发流程

实现智能客服涉及多个步骤,包括数据收集、模型训练、部署和优化。以下是一个基本的实现智能客服的流程,希望对大家有所帮助。 1.数据收集: 收集与客服相关的数据,包括对话记录、常见问题、知识库等。 数据可以来自历史的客服对话…

成都伊理威:开抖音小店到底能赚钱吗

在数字时代的浪潮中,抖音如同一颗璀璨的新星,吸引了无数创业者的目光。不少人心中盘旋着同一个问题:“开抖音小店,真的能赚钱吗?”事实上,答案并非简单的“能”或“不能”,而是一个充满变数的命题。 开设抖…

蓝桥杯真题|02普及-真题

目录 [蓝桥杯 2017 省 B] 日期问题 题目描述 输入格式 输出格式 输入输出样例 代码及思路 [蓝桥杯 2021 省 B] 时间显示 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码及思路 [蓝桥杯 2017 省 B] 日期问题 题目描述 小明正在整理一批历史文献。这些历…

uniapp+uview 学习笔记(一)—— H5开发

文章目录 前言一、开发步骤1.创建项目2.安装组件库并导入使用3.封装请求4.国际化5.打包 总结 前言 本文主要介绍使用uniapp框架和uview组件库进行H5开发,需要用到的开发工具为HBuilder X。 一、开发步骤 1.创建项目 打开HBuilder X,在顶部栏目选择 新…

使用map和set实现简单的词频统计

一、运行效果图 二、代码示例 #include <iostream> #include <fstream> #include <sstream> #include <string> #include <map> #include <set> #include <vector> #include <algorithm> using namespace std;class TextQuer…

【Leetcode每日一题】 递归 - 两两交换链表中的节点(难度⭐)(38)

1. 题目解析 题目链接&#xff1a;24. 两两交换链表中的节点 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 一、理解递归函数的含义 首先&#xff0c;我们需要明确递归函数的任务&#xff1a;给定一个链表&#xf…

Matlab|【免费】基于半不变量的概率潮流计算

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该程序主要内容是基于半不变量法的概率潮流&#xff0c;包含蒙特卡洛模拟法、半不变量法&#xff0b;Gram-Charlier级数展开以及半不变量法Cornish-Fisher级数展开三种方法以及效果对比&#xff0c;模型考虑了…

【AIGC工具】图片转3d模型

一个在线可以将图片转成3d模型的工具网站 有图形化界面 直接上传图片即可 网站地址&#xff1a; https://huggingface.co/spaces/Zhengyi/CRM

一文读懂systemd

文章目录 背景知识为何而来替代了什么init的缺点 systemd的系统架构图systemd (PID 1):systemd-journald:systemd-logind:systemd-udevd:systemd-networkd:systemd-resolved:systemd-timedated: systemd包括了哪些systemctljournalctlloginctlhostnamectltimedatectllocalectlm…

ngnix安装配置

通过yum -y install nginx的方式&#xff0c;有时候会出现No package nginx available的报错。迟迟无法解决。此时要通过下载安装包的方式安装。 1、下载安装包&#xff1a;官方网址 2、解压缩&#xff1a; tar -xzvf nginx-1.23.4.tar.gz cd nginx-1.23.4.tar.gz 3、源码包…

.NET高级面试指南专题十九【 数据库设计-4范式】

数据库范式设计是关系数据库设计中的重要概念&#xff0c;旨在减少数据冗余和提高数据的一致性。 范式设计的目的是提高数据库的数据质量、一致性和可维护性。通过将数据结构化为不同的范式&#xff0c;可以降低数据冗余&#xff0c;减少数据更新异常&#xff0c;提高数据的可靠…

【赠书第20期】AI绘画与修图实战:Photoshop+Firefly从入门到精通

文章目录 前言 1 入门篇&#xff1a;初识Photoshop与Firefly 2 进阶篇&#xff1a;掌握Photoshop与Firefly的核心技巧 3 实战篇&#xff1a;运用Photoshop与Firefly进行创作 4 精通篇&#xff1a;提升创作水平&#xff0c;拓展应用领域 5 结语 6 推荐图书 7 粉丝福利 前…

nginx 基本使用、借助 nginx 和 mkcert 实现本地 https://localhost 测试。

CSDN 如何将资源设置为免费&#xff1f; 安装和基本使用 进入 nginx 官网 下载 Mainline version 版本 解压到一个你喜欢的位置&#xff0c;比如解压到 C: 目录 不管配不配置环境变量&#xff0c;对 nginx 的所有操作都应该在对应文件夹中 基本命令的使用&#xff1a; cd …