Vue 解决在element中使用$notify在提示信息中换行问题


Posted in Javascript onNovember 11, 2020

在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示。

实现方式如下:

通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符。

在$notify消息提示中,作用于el-notification:

.el-notification {white-space:pre-wrap !important; }

有的童鞋可能试过样式white-space:pre,此时会出现的若提示信息内容较长时显示不齐全的问题。

即使使用自动换行样式(也无效):

/*设置内容超出后自动换行*/
word-wrap: break-word;
word-break: break-all;

具体区别可参加以下参数部分。

Vue 解决在element中使用$notify在提示信息中换行问题

Vue 解决在element中使用$notify在提示信息中换行问题

Vue 解决在element中使用$notify在提示信息中换行问题

补充知识:关于vue ts项目同时引入element-ui和ant-design,ts报错不能编译的解决方法。

vue ts版本同时引入ant和element不能打包。

Subsequent property declarations must have the same type. Property ‘$confirm' must be of type ‘(modalOptios: ModalOptions) => ModalConfirm', but here has type ‘ElMessageBoxShortcutMethod'.

Subsequent property declarations must have the same type. Property ‘$message' must be of type ‘Message', but here has type ‘ElMessage'.

通常vue项目只会用到一个ui库,但是往往会有一些特殊场景一个ui库不满足我们业务场景,我工作中使用到了ant-design-vue(全局引入)和element-ui(按需加载),同时项目是ts版本。

Vue 解决在element中使用$notify在提示信息中换行问题

elemt,ant ts报错

我搜索了很多的解决方案,都不符合,我发现它爆错的地方是两个的类型描述文件冲突了,这时候我把node_modules/element-ui/types/message-box.d.ts 和 node_modules/element-ui/types/message.d.ts 相关地方注释后再打包果然不报错了。

Vue 解决在element中使用$notify在提示信息中换行问题

Vue 解决在element中使用$notify在提示信息中换行问题

既然能通过注释的方式解决打包的问题,但是我们不能每次都去注释一次,这时候马上想到node的 fs包能帮我友好解决这个问题。

解决方案:

在项目根目录创建 config文件夹、os.js文件

Vue 解决在element中使用$notify在提示信息中换行问题

编写os.js文件,如下

/**
 * 这个文件在这是为了解决同时引入element-ui / ant-design ts 爆粗哦,
 * 解决版本把node_modules 相关文件注释了
 * */

let fs = require('fs')
let path = require('path')

let src1 = '../node_modules/element-ui/types/message.d.ts'
annotation(src1, '$message: ElMessage')
let src2 = '../node_modules/element-ui/types/message-box.d.ts'
annotation(src2, '$confirm: ElMessageBoxShortcutMethod')

function annotation(src, params) {
  fs.readFile(path.resolve(__dirname, src), 'utf8', function(err, files) {
    if (!err && files !== '') {
      let val = params
      let has = `// ${params}`
      let start = files.indexOf(val)
      let start2 = files.indexOf(has)
      if (start > -1 && start2 === -1) {
        var result = files.replace(val, has)
        fs.writeFile(
          path.resolve(__dirname, src),
          result,
          'utf8',
          function(err) {
            if (err) {
              console.log(err)
            }
          }
        )

        console.log(params + ' 注释成功!')
      } else {
        console.log('没有需要注释对或者已经注释了!')
      }
    } else {
      console.log(
        params + ' 没有需要注释对或者已经注释了或者注释文件失败!'
      )
    }
  })
}

原来的命令,我们只需要修改build部分

编写package.json运行命令,把我们编写的os.js加入到运行命令

"scripts": {
    "build": "node config/os.js&vue-cli-service build"
  },

现在运行npm run build

Vue 解决在element中使用$notify在提示信息中换行问题

大功告成!

以上这篇Vue 解决在element中使用$notify在提示信息中换行问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
JavaScript中的类型检查
Feb 03 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 #Javascript
使用Vant完成Dialog弹框案例
Nov 11 #Javascript
vue实现lodop打印功能的示例
Nov 11 #Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 #Javascript
You might like
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
文本加密解密
2006/06/23 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
新三好学生主要事迹
2014/01/23 职场文书
《荷花》教学反思
2014/04/16 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
人与自然观后感
2015/06/16 职场文书
户外拓展训练感想
2015/08/07 职场文书
九年级语文教学反思
2016/03/03 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python