Vue项目中元素使用美元通知出现换行如何解决

今天就跟大家聊聊有关Vue项目中元素使用美元通知出现换行如何解决,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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

<强>实现方式如下:

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

在美元通知消息提示中,作用于el-notification:

。el-notification{空白:pre-wrap !重要;}

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

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

/*设置内容超出后自动换行*/自动换行:break-word; 　　单词分割:打破所有;

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

<强>关于Vue ts项目同时引入element-ui和ant-design, ts报错不能编译的解决方法。

Vue ts版本同时引入ant和元素不能打包。

后续属性声明必须具有相同的类型。美元财产的确认# 39;必须的类型(modalOptios: ModalOptions)=比;ModalConfirm& # 39;,但这里有“ElMessageBoxShortcutMethod& # 39;类型。

后续属性声明必须具有相同的类型。财产的美元消息# 39;一定类型的消息# 39;,但这里类型ElMessage& # 39;。

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

<强> elemt,蚂蚁ts报错

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

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

<>强解决方案:

在项目根目录创建配置文件夹,操作系统。js文件

编写操作系统。js文件,如下

/* * 　　*这个文件在这是为了解决同时引入element-ui/ant-design ts爆粗哦, 　　*解决版本把node_modules相关文件注释了 　　* */让fs=要求(& # 39;fs # 39;) 　　让道路=需要()& # 39;path & # 39; 　　 　　让src1=& # 39; . ./node_modules/element-ui/类型/message.d.ts& # 39; 　　注释(src1 & # 39;信息:美元ElMessage& # 39;) 　　让src2=& # 39; . ./node_modules/element-ui/类型/message-box.d.ts& # 39; 　　注释(src2 & # 39; $证实:ElMessageBoxShortcutMethod& # 39;) 　　 　　函数注释(src, params) { 　　fs.readFile(路径。解决(__dirname src) & # 39; use utf8 # 39;、功能(呃,文件){ 　　如果(!呃,,文件!==& # 39;& # 39;){ 　　让val=参数 　　我们已经='//$ {params} ' 　　我们开始=files.indexOf (val) 　　让start2=files.indexOf(已经) 　　如果(开始在1,,start2===1) { 　　var=结果文件。替换(val) 　　fs.writeFile ( 　　路径。解决(__dirname src), 　　结果, 　　& # 39;use utf8 # 39; 　　函数(err) { 　　如果(err) { 　　console.log (err) 　　} 　　} 　　） 　　 　　控制台。日志(params + & # 39;注释成功! & # 39; 　　其他}{ 　　console.log(& # 39;没有需要注释对或者已经注释了! & # 39;) 　　} 　　其他}{ 　　控制台.log（ 　　params + & # 39;没有需要注释对或者已经注释了或者注释文件失败! & # 39; 　　） 　　} 　　}) 　　}

Vue项目中元素使用美元通知出现换行如何解决