Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

最新推荐文章于 2024-05-20 15:52:58 发布
最新推荐文章于 2024-05-20 15:52:58 发布
阅读量8.3k 收藏 11
点赞数 7
分类专栏： 开发笔记 文章标签： elementui html css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18835599/article/details/120087159
版权
产品需求：要求提示信息换行时单词不能分开

在这里插入图片描述

因为element-ui中this.$message 默认 word-break:break-all ， 我需要改为word-wrap:break-word

具体步骤

在这里插入图片描述
在这个样式表中修改无效，所以发现在scoped的style中修改它的样式是无效的，因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped，但是如果去掉scoped后，又不满足单组件的CSS样式，所以我们在写个style，附加在没有scoped的style中就可以实现了。
在这里插入图片描述
到这里就实现了

管乐明
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
iview 提示泡泡 this.$Message.error等局部样式下调
weixin_47239395的博客
05-11 434
局部更改this.$Message样式
修改element的message样式
weixin_45884508的博客
04-11 2539
这是message原本的样式。
Element-ui组件库 message组件重复弹出
最新发布
wancaicai_的博客
05-20 289
/ 重置 message，防止重复点击重复弹出 message 弹框// 如果弹窗已存在先关闭})二、引入// src\main.js 文件中import ElMessage from './utils/ElMessage' 引入// 挂载Vue (注意 : 在Vue.use(Element);下添加以下代码)三、使用this.$Message.success('这是一条成功消息')this.$Message.warning('这是一条警告消息')
element-ui 消息提示框(message)样式修改
热门推荐
sumimg的博客
11-06 1万+
请求成功的消息提示框，修改字体大小和其他样式，也可以修改icon的样式 /*alert 成功弹出框样式*/ .el-message--success { top: 80px !important; } .el-message .el-icon-success { font-size: 18px; } .el-message--success .el-message__content { font-size: 18px; font-weight: 700; } 调整页面停留时间 t.
Vue——ElementUI 如何修改消息提示框样式
Bling Bling ~~
01-04 4212
前言 需求将弹出框添加样式，图1是原图，图2是需要实现的样式，我按照最原始的办法，找到类名，然后修改css,但是无论我新添加个类名也好，还是/deep/深度修改，都无法修改其样式，后经过研究，发现了问题，下面将我的代码和大家分享一下。 （图1） (图2) 代码分析 // 弹出警告提示框 this.$confirm('确认删除吗?', '警告', { type: 'warning'}) .then(() => { this.$message({ message: '删除成功',
$message修改样式无效问题解决方法
eqizhihui的博客
08-23 938
今天写代码时遇到了一个问题，前提是项目做了移动端适配，会根据屏幕大小改变字体的大小，所以导致在pc端展示时$message的图标被放大。注意是使用querySelectorAll而不是querySelector，querySelector只会获取第一个。
Vue ElementUI 如何修改消息提示框样式
qq_36571836的博客
07-16 2534
一、前言 在窄屏模式下（移动端），提示框的宽度太宽，希望降低宽度。 应当如何修改 ElementUI 的样式呢？ 二、情景还原 // 弹出注销提示框 this.$confirm('确认注销吗?', '提示', { }).then(() => { this.$message({ message: '已成功注销', type: 'success' }) }).catch(() => { /* 用户取消注销 */ }) ... <style scoped> ..
elementUI vue this.$confirm 和el.docx
11-22
ElementUI Vue 中的 `$confirm` 和 `el-dialog` 组件的使用和自定义 ElementUI 是一个基于 Vue.js 的 UI 组件库，提供了许多实用的 UI 组件来帮助开发者快速构建 Web 应用程序。在 ElementUI 中， `$confirm` 和 `...
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: ...
记录2——Element-UI中message组件样式修改
You_got_this的博客
11-15 1929
可爱的我又重新出现，记录下今天遇到的难点，根据需求需要在创建成功或失败时弹出提示框，成功好说但是失败需要弹出几个成功几个失败，并且有查看按钮，点击查看按钮可以看到创建失败，类似这个效果 这里说一点element的message组件带按钮的提示，但是我们公司对element进行了改进，相当于是element的定制版 所以我们是有一个自定message样式是类似的，但是样式有点不一样，需要重新自己修改下，但是不管样式代码写在哪里都不起作用，后来发现在scoped的style中修改它的样式是无效的，因为El
vue 公用组件开发 消息提示$message
weixin_30882895的博客
01-11 5033
文件目录： github地址：https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components/message 最终的效果： 这里的样式颜色啥的写的比较草率了，图标也选的比较草率，我需要一个ui设计师，没有的话我只能随便打打颜色了 组件的源码解析： message： m...
Vue使用Element的消息提示Message，使用customClass自定义样式
小钻风的博客
04-19 9363
Element的Message常被用来实现提示功能，比如操作成功，操作失败的提示 有时一些操作对接后台，错误信息会返回一个list：[ ]， 比如一个导入表格的接口，一些错误信息，后台返回的是这样： [ "第1行数据重复", "第3行编号名称不存在", "第4行数据为空", "第6行格式不正确" ] 数据不多还好，但是一旦数据非常多，页面就会变成下面这样 这样页面既不美观，也会导致一些属性失效，比如“是否显示关闭按钮”，根本看不到这个按钮了（因为这个按钮会垂直居中在messa
this.message 提示内容修改自定义
m0_46348803的博客
03-17 543
【代码】this.message 提示内容修改自定义。
element中Dialog和MessageBox弹框按钮和关闭图标样式修改
我是段段的博客
03-28 9624
项目中用到了比较多的Dialog弹框和MessageBox弹框，但是Element原始的组件样式 已经不符合项目的风格，所以需要对Element中的样式进行整体修改 原始的组件样式如下 原始Dialog弹框 原始MessageBox弹框 直接上修改完成的代码 重新写了一个类名oe-dialog-btn，在使用Dialog和MessageBox弹框的地方直接写此类名就好了 （可以将修改的样式写在全局公共样式中，这样整个项目都可以用了） /* 修改 取消 按钮默认的边框颜色 */ .oe-dialog-bt
vue+element 修改Message 消息提示状态弹窗
WMW_wmw的博客
04-08 1662
效果图 修改前 修改后 实现方式 1.创建js文件 import { Message } from 'element-ui' //封装弹框 const msgs = (type,msg1,msg2) => { if(msg1){ msg1=`<p class="el-message-title-top">${msg1}</p>` }else{ msg1='' } if(msg2){
el-message样式修改无效怎么搞？VUE3.0
m0_58587536的博客
07-07 3152
el-message样式修改无效怎么搞？VUE3.0，使用 --el-message-bg-xxx 可以修改消息提示文字以及背景、边框的颜色
前端框架iview 中message组件改变字体大小
qq_40269801的博客
12-22 2187
this.$Message.error({ render: h=>{ return h('span',{style:{fonSize:'16px}},['请填写超时时间']) } })
修改this.$message样式
09-06
- *1* [Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式](https://blog.csdn.net/qq_18835599/article/details/120087159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管乐明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值