vue自行封装错误提示信息——$message——技能提升

news2024/11/24 15:33:44

在使用vue的过程中,我们经常用到的是这一种的提示信息:
在这里插入图片描述
该组件提供的属性有以下几个:
在这里插入图片描述
但是,如果想要自定义提示信息,则可以使用下面的方式来处理:

1.自定义提示信息组件

import Vue from 'vue'
export function MessageDel(content,type,duration, onClose) {
    let _remove
    // // 创建 VNode
    const h = this.$createElement
    let innerText = h('span', { style: { color: '#000000A6' } }, content);
    let innerIcon = h('a-icon', {
      style: { marginRight: '0px', marginLeft: '20px', color: '#ccc', cursor: 'pointer' },
      attrs: { type: 'close' },
      on: { click: () => _remove() }
    })
    let container = h('span', {}, [innerText, innerIcon])
    // 调用 Message 组件
     _remove = Vue.prototype.$message.info({
        content: container,
        duration: duration || 0,
        onClose: onClose,
     })
}
export default {
    MessageDel,
}

2.挂载到vue原型上——main.js文件中添加以下代码

import { MessageDel } from './utils/delMessage';
Vue.prototype.$MessageDel = MessageDel;

3.其他页面中的使用——$MessageDel

this.$MessageDel(res.Message);

完成!!!

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

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

相关文章

Linux基本指令二

Linux基本指令二 一、more指令1、语法2、功能3、常用操作 二、less指令1、语法2、功能3、常用选项4、常用操作 三、head指令1、语法2、功能3、常用选项4、示例 四、tail指令1、语法2、功能3、常用选项4、示例 五、date指令1、语法2、功能3、常用的标记4、设置时间5、时间戳6、示…

VxeTable 表格组件推荐

VxeTable 表格组件推荐 https://vxetable.cn 在前端开发中,表格组件是不可或缺的一部分,它们用于展示和管理数据,为用户提供了重要的数据交互功能。VxeTable 是一个优秀的 Vue 表格组件,它提供了丰富的功能和灵活的配置选项&…

linux上negix部署静态页面

1.看配置文件 进入cndf.d 这里的是配置部署项目中的文件 进入一个查看下 上面的是服务的域名,服务是http://test.fun-med.cn/#/,后面加服务名(你的前端) 2.看下页面位置 和上面的路径要匹配

IDEA工具的 CTRL + Shift + F 全局搜索失效

失效原因:快捷键冲突,与输入法默认的简繁体切换快捷键冲突了。 解决方式: 1、微软输入法 1.1 、任务栏 – 微软任务 – 语言首选项 1.2、微软拼音 – 选项 1.3、按键 – 热键(简体/繁体中文输入切换)关闭或修改 …

华为云CodeArts Check代码检查插件(VSCode IDE版本)使用指南

CodeArts Check VSCode IDE代码检查插件 本插件致力于守护开发人员代码质量,成为开发人员的助手和利器。秉承极简、极速、即时看护的理念,提供业界规范(含华为云)的检查、代码风格一键格式化及代码自动修复功能。 感兴趣的小伙伴…

并网型虚拟同步发电机控制仿真(Matlabsimulink仿真实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【Python_PyQtGraph 学习笔记(八)】基于PyQtGraph将X轴坐标设置为系统时间

【Python_PyQtGraph 学习笔记(八)】基于PyQtGraph将X轴坐标设置为系统时间 前言正文1、获取plotItem的bottom轴对象2、设置刻度值,即获取时间3、刻度值与显示数值绑定4、设置bottom轴的刻度数值显示前言 基于PySide2、PyQtGraph和PySide2动态绘图,将X轴坐标设置为系统事件…

Linux 实践项目之论坛搭建

目录 一、思路 1、环境搭建(lamp--Linux apache mysql php ) 2、关闭防火墙SELinux启动服务 3、将论坛源代码上传至/var/www/html路径下 4、设置MySQL数据库名称和密码 5、浏览器上搭建Discuz论坛 二、实操 1、安装 2、关闭防火墙SELinux启动服务…

Activiti工作流引擎详解与应用

一、简介 Activiti是一个开源的工作流引擎,基于BPMN2.0标准进行流程定义。它可以将业务系统中复杂的业务流程抽取出来,使用专门的建模语言BPMN2.0进行定义,业务流程按照预先定义的流程进行执行,实现了系统的流程由Activiti进行管…

第三节:AntDisgn安装与导入

AntDisgn官网 1.安装:npm install -g vue/cli或者 yarn global add vue/cli 2.导入(我这进行的是全局使用在main.js里边进行配置) import { createApp } from vue import ./style.css import App from /App.vue import router from /router/index 导入路由 import …

18369-2022 玻璃纤维无捻粗纱 课堂随笔

声明 本文是学习GB-T 18369-2022 玻璃纤维无捻粗纱.pdf而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件规定了玻璃纤维无捻粗纱(以下简称"无捻粗纱")的分类和标记、技术要求、试验方法、检验 规则、标志、包装、运输和储存。…

unity脚本_MonoBehaviour c#

在MonoBehaviour里可以获取: 自己物体身上的属性 和 位置 及 其他类物体身上的属性 和 位置 this.gameObject.属性 this.transform.position this.transform.eulerAngles this.transform.lossyScale 如果是其他类 需要创建一个类对象 然后用类对象去 点 另外…

DRM全解析 —— encoder详解(1)

本文参考以下博文: Linux内核4.14版本——drm框架分析(3)——encoder分析 特此致谢! 1. 简介 encoder是编码器/输出转换器,负责将CRTC输出的timing时序转换成外部设备所需要的信号,如HDMI转换器或DSI Controller。 具体来讲&a…

【生成模型】解决生成模型面对长尾类型物体时的问题 RE-IMAGEN: RETRIEVAL-AUGMENTED TEXT-TO-IMAGE GENERATOR

介绍 尽管最先进的模型可以生成常见实体的高质量图像,但它们通常难以生成不常见实体的图像,例如“Chortai(狗)”或“Picarones(食物)”。为了解决这个问题,我们提出了检索增强文本到图像生成器…

超实用的蓄电池小技巧,不会用就太可惜了!

蓄电池在现代社会中扮演着重要的角色,用于供电备份、电动交通工具、可再生能源储存等各种应用。然而,蓄电池的性能监控和维护管理对于确保其可靠性和寿命至关重要。 随着科技的不断进步,蓄电池监控系统成为了一种关键工具,帮助用户…

3D目标检测:DFA3D: 3D Deformable Attention For 2D-to-3D Feature Lifting

论文作者:Hongyang Li,Hao Zhang,Zhaoyang Zeng,Shilong Liu,Feng Li,Tianhe Ren,Lei Zhang 作者单位:South China University of Technology; The Hong Kong University of Science and Technology; International Digital Economy Academy (IDEA); Ts…

大数据软件项目的数据清洗

大数据软件项目中的数据清洗是数据预处理过程中的重要环节,用于识别和纠正数据集中的错误、不一致性和不完整性。虽然没有专门的"数据清洗开发框架",但有许多工具和库可用于数据清洗任务。以下是一些常见的数据清洗工具和库,可以与…

RK3588 DDR电源电路设计详解

RK3588 VCC_DDR电源PCB设计 1、VCC_DDR覆铜宽度需满足芯片的电流需求,连接到芯片电源管脚的覆铜足够宽,路径不能被过孔分割太严重,必须计算有效线宽,确认连接到CPU每个电源PIN脚的路径都足够。 2、VCC_DDR的电源在外围换层时&am…

数学模型水动力模拟、水质建模、复杂河网构建技术在环境影响评价、排污口论证及防洪评价中的实践技术应用

数学模型在水环境评价、防洪评价和排污口论证等领域中的重要作用,随着人类活动的不断增加和环境问题的日益突出,对水资源和水环境的保护与管理变得至关重要。为了更好地理解和应对这些挑战,数学模型成为一种强大的工具,能够提供量…

docker搭建jenkins

1.拉取镜像 docker pull jenkinsci/blueocean 2.启动容器 docker run -d -u root -p 8666:8080 -p 50000:50000 -v /var/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime --name MyJenkins jenkinsci/blueocean 3.访问ip:port,就能访问了 4.docker logs 容器…