解决ElementUI的Notification通知不自动换行

最新推荐文章于 2024-05-13 14:46:09 发布
原创 最新推荐文章于 2024-05-13 14:46:09 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #ElementUI #js

本文指导如何通过自定义样式解决ElementUI Notification中的提示文本溢出问题，关键在于应用`word-break: break-all`属性实现自动换行。

解决ElementUI的Notification通知不自动换行的问题

问题描述：

提示语没有自动换行，超出了弹框的范围，影响客户使用
在这里插入图片描述

解决办法：

自定义一个样式customNotifyClass，去掉scoped
在这里插入图片描述
在这里插入图片描述
样式里最主要的是word-break: break-all，break-all会使提示语在合适的位置自动换行，允许在单词内换行，而不写这个样式默认是normal会使用浏览器默认的换行规则。
在这里插入图片描述

实现效果：

在这里插入图片描述

vue + Element UI的Notification通知
m0_45192514的博客
03-26 1477
vue + Element UI的Notification通知 比较简单 效果图 源码 var msg = new Vue({ el: “#Message”, data: { list: [ { msg: “请输入用户名”, title: “错误”, type: “error”, duration:0 }, { msg: “登录成功”, title: “成功”, type: “success”, duration: 3000 }, { msg: “账号安全警告”, title: “警告”, type: “
Vue 解决在element中使用$notify在提示信息中换行问题
01-22
在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 实现方式如下： 通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符”\n”，故需要在待展示的信息字符串中加入相应的换行标识符。 在$notify消息提示中，作用于el-notification： .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式white-space:pre，此时会出现的若提示信息内容较长时显示不齐全的问题。 即使使用自动换行样式（
element Notify通知 提示文字自动换行
蓝胖子的博客
04-27 1322
element Notify通知 提示文字自动换行
vue-element-admin $notify 内容过长不自动换行的问题
09-16 1035
解决方案:样式覆盖自动换行 /*设置内容超出后自动换行*/ word-wrap: break-word; word-break: break-all;
element-ui Notification 通知文字换行
qq_45489665的博客
04-01 2346
换行代码如下： let success='', fail=''; for(let o in res.data.ToSuccess) { success += res.data.ToSuccess[o] + " " } for(let p in res.data.ToFailure) {
ElementUI 文本内容不能自动换行，内容超出显示（遇到中文、空格才会换行）
上好佳的博客
11-10 4882
问题（如图）： 文本超出显示范围，尝试其他几种情况后发现，当文本中无空格和中文时，才会出现下图中的情况 解决方案： 设置 div 强制换行 <div style="word-break: break-all"> zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq|zxcvbnmasdfghjklpoiuytrewq </div> 其他： 举例一下几种可以正常换行的情.
element-plus的ElNotification 内容换行显示
leng0920的博客
05-13 862
element-plus的ElNotification 内容换行显示
element-ui Message消息提示文字换行
小二来一只葫芦
05-30 8719
let data = ['导入成功条数：' + response.data.successNum + '条；', '导入失败条数：' + response.data.failNum + '条；', '导入失败原因：'+response.data.failMsg]; let newDatas = []; const h = this.$createE...
精选资源
在elementui中Notification组件添加点击事件实例
01-22
1. 官方文档 ... handleClick() { let telNo = 1111, ... title: 通知消息, position: bottom-right, dangerouslyUseHTMLString: true, message: `号码：${telNo}</i></p>`, duration: 0, type: warning, onClic
Element Notification通知的实现示例
10-15
在本文中，我们将深入探讨如何在Vue项目中使用Element UI库实现Notification通知功能。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI组件，用于构建美观且易于使用的Web应用界面。Notification组件是其中...
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
10-16
在Vue项目中，Element-UI库提供了一个名为`Notification`的组件，用于创建全局的通知提示。这个组件在默认情况下提供了一些基本的配置选项，但有时我们可能需要更自定义的功能，比如添加自定义按钮或者控制多个通知...
把elementui 里的message 消息提示内容换行显示+弹框一直显示不消失+修改弹框位置+可以手动关闭消息提示框（把js字符串按照分号换行）
南北极之间
10-12 3775
原始得到的结果太多了！想换行 解决方法： 代码： if (response.code == 500) { console.log(response.code) // this.$message.error(response.msg) let str = response.msg let reg = /[;；]/g; str=str.replace(reg,' <br/> '); con
elementui表格不换行_快速整理表格数据实用技能及技巧
weixin_42311672的博客
12-11 783
1.1清除数据中的垃圾1、清除数据中的空格一般情况下，数据前后和中间的空格用“查找和替换”工具即可解决。也可以打开“查找和替换”对话框，在“查找内容”文本框中输入一个空格，在“替换为”文本框中留空（什么也不输）单击“全部替换”按钮即可。如图如果是英文名称，那么按照英语语法要求，英语单词之间必须有个空格。此时，就不能使用“查找和替换”工具了，因为这样会替换掉所有的空格。这种情况下，可以使用TRIM函...
elementUI的notify组件的使用，点击事件和内容自动换行
生而为人我很抱歉
11-03 812
【代码】elementUI的notify组件的使用，点击事件和内容自动换行。
ElementUI弹框组件 messageBox 如何换行 ？
草巾冒小子的博客
09-19 8710
ElementUI弹框组件 messageBox 如何换行 ？ 参考博客：element this.$confirm确定框内容换行显示 效果图 · 截图示下： demo代码如下： const confirmText = ['您确定要结束招聘吗？','注意：一经确定，该职位招聘信息将会下架且不支持修改，剩余人才币将直接返还到您的账户。']; const newDatas = []; c...
element-ui之MessageBox内容换行
qq_45268602的博客
05-22 1585
使用element-ui的MessageBox弹框时，弹框内容实现自定义换行. let data = ["数据项一", "数据项二", "数据项三", "数据项四", "数据项五"]; let newData = []; const h = this.$createElement; data.forEach((item) => { newData.push(h("p", null, item)); }); this.$con
element-ui下提示框messageBox内容换行问题
xcxy2015的博客
11-29 5994
诉求：在使用element-ui的情况下，想在前端弹出提示框，且框内的消息可以自由换行。 解决方法：在this.alert中加一个配置： dangerouslyUseHTMLString:true 然后就可以以html的方式输入提示框的内容了，可以自由的调整字号，换行，空格，颜色等。 源码： this.$alert('<h4>这是第一行</h4><br&...
antdv中Notification组件换行的两种方式
returndbf的博客
11-17 1536
使用VNode进行换行的两种方式
elementUI 通知组件 notification不自动关闭如果通知多了怎么解决
最新发布
07-10
ElementUI 的 `Notification` 组件提供了一种灵活的方式来展示全局的通知消息。当通知不自动关闭时，可能会导致通知堆积在界面上，影响用户体验。为了解决这个问题，可以通过以下方式进行优化处理： ### 设置自动关闭 `Notification` 提供了 `duration` 属性来控制通知的显示时间。默认情况下，通知会在 4500 毫秒后自动关闭。如果希望调整这个时间，可以在调用 `this.$notify` 时传入自定义的 `duration` 值。 ```javascript this.$notify({ title: '提示', message: '这是一条将在2秒后自动关闭的通知', duration: 2000 // 单位为毫秒 }); ``` 如果希望通知一直显示直到用户手动关闭，则可以将 `duration` 设置为 `0`。但需要注意的是，在这种情况下，必须确保提供了关闭按钮（默认是开启的），否则通知将无法被关闭[^1]。 ### 通知过多时的优化处理方法 1. **限制最大通知数量** ElementUI 的 `Notification` 默认没有限制同时显示的通知数量。为了避免通知堆积，可以通过封装 `Notification` 组件并维护一个通知队列的方式实现限制最大显示数量的功能。当超过设定的最大值时，可以选择不显示新的通知或者替换掉最早的通知。 2. **使用唯一标识避免重复通知** 可以通过 `customClass` 或者内部状态管理工具（如 Vuex）为每一种类型的通知分配唯一的标识符。在新通知触发时，先检查是否存在相同标识的通知正在显示；若存在，则更新其内容或重置其倒计时，而不是创建新的通知。 3. **优化通知样式和交互** 对于频繁出现的通知，可以考虑简化其样式，减少视觉干扰。例如，仅保留必要的标题和信息，并且确保关闭按钮始终可见。此外，也可以添加点击通知外部区域关闭的功能，提升用户的操作体验。 4. **采用Toast替代方案** 如果应用场景中需要大量短暂存在的通知，可以考虑使用更轻量级的 Toast 组件作为替代。与 `Notification` 不同，Toast 通常只在屏幕中央显示一条简短的信息，并且会自动消失，更适合用来处理大量的即时反馈场景。 通过以上方法，可以根据具体需求对 `Notification` 进行配置和优化，从而有效解决通知不自动关闭导致的通知堆积问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

大雄不是大熊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值