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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
瀑布流布局代码一例
Apr 11 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery事件用法详解
Oct 06 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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 Document 代码注释规范
2009/04/13 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
共享自己写一个框架DreamScript
2007/01/20 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Python实现选择排序
2017/06/04 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
自我评价200字分享
2013/12/17 职场文书
生产总经理岗位职责
2013/12/19 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
大学生求职自我评价
2014/01/16 职场文书
房产买卖委托公证书
2014/04/04 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
闪闪的红星观后感
2015/06/08 职场文书
中学图书馆工作总结
2015/08/11 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
关于python中模块和重载的问题
2021/11/02 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS