解决element-plus提示组件样式丢失问题

2023-11-16

使用element-plus的提示组件时样式不显示

import { ElNotification } from 'element-plus';
ElNotification({
    message: err.response.data.msg || '请求失败',
    type: 'error',
    duration: 3000
})

如下图所示:

在这里插入图片描述

解决方案

入口文件(main.ts/js)中引入相关样式即可

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

import 'virtual:windi.css';
import "element-plus/theme-chalk/el-notification.css";

成功示例

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决element-plus提示组件样式丢失问题 的相关文章

  • 如何将 Django 中的数组传递给模板并在 JavaScript 中使用它

    我想将数组传递给模板 然后通过 JavaScript 使用它 In my views py I have arry1 Str 500 20 return render to response test html array1 arry1 在
  • 我如何使用 querySelector() 选择具有双类的元素

    当我想使用 querySelector 选择元素时遇到问题 ul class xoxo blogroll ul 我怎样才能选择它ul元素 在我的代码中我像这样使用 var list document body querySelector u
  • 如何在 Sequelize ORM 中限制连接行(多对多关联)?

    Sequelize 定义了两种模型 具有多对多关联的 Post 和 Tag Post belongsToMany db Tag through post tag foreignKey post id timestamps false Tag
  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • NestJS e2e 测试模拟会话装饰器

    我正在尝试使用 supertest 编写一个 e2e 测试 其中我的控制器实际上使用了 Session 装饰师 然而 我不想承担使用数据库连接等启动会话的全部负担 因此测试中的我的应用程序实际上并未初始化会话 相反 我想首先模拟掉装饰器提供
  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何在 javascript 中基于类型字符串创建新对象?

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n
  • 找不到“节点”的类型定义文件

    更新 Angular Webpack 和 TypeScript 后出现奇怪的错误 知道我可能会错过什么吗 当我使用 npm start 运行应用程序时 出现以下错误 at loader Cannot find type definition
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 如何读取firebase推送通知内容并在ionic2中触发方法?

    是否可以访问push notificationionic 2 中的内容并在通知到达时执行一堆代码或event fire 我建议使用科尔多瓦插件 firebase https github com arnesson cordova plugi
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我

随机推荐

  • Gof23设计模式之工厂方法模式和抽象工厂模式

    在java中 万物皆对象 这些对象都需要创建 如果创建的时候直接new该对象 就会对该对象耦合严重 假如我们要更换对象 所有new对象的地方都需要修改一遍 这显然违背了软件设计的开闭原则 如果我们使用工厂来生产对象 我们就只和工厂打交道就可
  • Bootstrap3 多个模态对话框无法显示的问题

    今天帮同事调了一个代码 他们的项目最近在用Bootstrap做开发 突然间 他遇到了一个奇怪的问题 如果一个页面中 有多个Modal对话框的话 排列在第一个的对话框 能够正确显示 第二个 只能导致页面出现MASK层 却不能显示Dialog
  • 数据库作业14:第五章: 数据库完整性 习题 + 存储过程

    今有以下两个关系模式 职工 职工号 姓名 年龄 职务 工资 部门号 其中职工号为主码 Worker Wno Wname Wage Wjob Wsalary Wdept 部门 部门号 名称 经理名 电话号 其中部门号为主码 Dept Dno
  • 2D Fast Marching Computations

    Fast Marching method 跟 dijkstra 方法类似 只不过dijkstra方法的路径只能沿网格 而Fast Marching method的方法可以沿斜线 Level Set Methods and Fast Marc
  • MySQL-索引详解(四)

    作者 小刘在C站 个人主页 小刘主页 每天分享云计算网络运维课堂笔记 努力不一定有回报 但一定会有收获加油 一起努力 共赴美好人生 树高千尺 落叶归根人生不易 人间真情 前言 本次MySQL 索引章节比较多 分为多篇进行发布 本章继续 链接
  • shell的字符串截取

    shell的字符串截取 这里介绍一下shell当中字符串截取的几种方法 假设有变量 var http www aaa com 123 htm 1 号截取 删除左边字符 保留右边字符 echo var 其中 var 是变量名 号是运算符 表示
  • Python学习第六天——函数(一)

    1 为什么用函数 1 代码冗余 程序组织结构不清晰 可读性差 2 扩展性差 2 如何让使用函数 原则 先定义后使用 定义不会执行 但是会检查语法错误 函数名指向内存地址存储代码信息 先通过函数名找到函数的内存地址 然后函数内存地址的 触发代
  • 使用docker安装nginx

    一 获取nginx镜像 1 获取nginx镜像列表 docker search nginx 2 拉取nginx镜像到本地 注 默认选取官方最新镜像 其它版本可以去DockerHub查询 docker pull nginx 3 查看镜像库 获
  • ROS搬运 笔记1

    图概念概述 Nodes 节点 一个节点即为一个可执行文件 它可以通过ROS与其它节点进行通信 Messages 消息 消息是一种ROS数据类型 用于订阅或发布到一个话题 Topics 话题 节点可以发布消息到话题 也可以订阅话题以接收消息
  • linux 下qt的头文件,Qt添加库文件和头文件目录(QCreator)

    在使用QtCreator开发图像处理程序的时候想加入Opencv库来处理图形 添加头文件 需要编辑工程文件夹下的 pro文件在文件中添加以下内容 即可包含头文件的文件夹 INCLUDEPATH D OpenCV2 0 vc2008 incl
  • 电脑安装Chrome OS

    原文地址 https www ithome com html win10 336501 htm 2010年12月7日 谷歌发布了一款桌面操作系统 Chrome OS 关于这款操作系统的新闻 IT之家没少报道过 相信不少读者对这款操作系统比较
  • 闪回表+查看和修改撤销表空间的信息+闪回表操作语法+闪回表的案例

    闪回表 flashback table 1将表回滚到一个过去的时间点或系统改变号scn上 用来快速恢复表的数据 2用户对表数据的修改操作 都记录在撤销表空间中 3需要使用到与撤销表空间相关的undo信息 通过show parameeter
  • 数据分析36计(19):美国生鲜配送平台【Instacart】如何实现按时配送——使用分位数回归...

    往期系列原创文章集锦 数据分析36计 18 Shopify如何使用准实验和反事实来优化产品 数据分析36计 17 Uber的 A B 实验平台搭建 数据分析36计 16 和 A B 测试同等重要的观察性研究 群组研究 VS 病例 对照方法
  • go的timer

    看程序 package main import fmt time func main time AfterFunc 3 time Second func fmt Println come here 1 timer time NewTimer
  • 每日一练(三十七)

    文章目录 3 1 求字符串的子串个数 3 2 判断程序输出 3 3 strlen 实现 3 4 strcmp 实现 3 5 strcat 实现 每日一练合集 3 1 求字符串的子串个数 3 2 判断程序输出 3 3 strlen 实现 in
  • node.js中的url.parse方法详解

    parse 方法接受一个URL字符串 解析它 然后返回一个URL对象 如果urlString不是字符串 则抛出类型错误 如果存在auth属性但无法解码 则会抛出URIError 语法 url parse urlStr parseQueryS
  • 医生如何使用ChatGPT提高工作效率

    文章目录 引言 案例一 快速获取医学知识 案例二 协助患者自我诊断 案例三 辅助临床决策 案例四 提供在线咨询服务 案例五 用病人易于理解的语言总结关键的临床信息 案例六 高效整理医疗文件 案例七 根据患者的文化水平定制患教材料 案例八 面
  • Delaunay三角化实现原理

    一 概述 二 图形化解释 1 超级三角形插入第一个点 2 插入第二个点 3 插入第三个点 4 插入第四个点 5 插入第五个边 6 在超级三角形中移除具有极值的边 三 性质 四 代码 1 伪代码 2 C 实现 3 C 实现 参考 一 概述 本
  • React v4官方推荐的富文本编辑器braft-editor使用

    官方推荐使用两个编辑器其中一个 v5推荐另一个 以v4这个为例 由于官方文档都是class类组件 使用时不太方便 所以下面是自己写的一个hook函数组件 只实现了基本使用 特殊化的暂未写出 一 安装 使用npm安装 npm install
  • 解决element-plus提示组件样式丢失问题

    使用element plus的提示组件时样式不显示 import ElNotification from element plus ElNotification message err response data msg 请求失败 type