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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
深入理解ES6之数据解构的用法
Jan 13 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+Html+缓存
2006/11/25 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
网络维护中文求职信
2014/01/03 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2014年防汛工作总结
2014/12/08 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Python面试不修改数组找出重复的数字
2022/05/20 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS