电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue 解決在element中使用$notify在提示信息中換行問題

瀏覽:3日期:2022-11-01 14:22:28

在項目開發過程中,遇到如下用戶體驗提升需求:需要實現錯誤提示時根據后臺返回錯誤列表信息,換行展示。

實現方式如下:

通過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在提示信息中換行問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | 气动机械手-搬运机械手-气动助力机械手-山东精瑞自动化设备有限公司 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 陶瓷砂磨机,盘式砂磨机,棒销式砂磨机-无锡市少宏粉体科技有限公司 | 岩棉板|岩棉复合板|聚氨酯夹芯板|岩棉夹芯板|彩钢夹芯板-江苏恒海钢结构 | 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | 水压力传感器_数字压力传感器|佛山一众传感仪器有限公司|首页 | 茅茅虫AI论文写作助手-免费AIGC论文查重_写毕业论文降重 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | 喷砂机厂家_自动喷砂机生产_新瑞自动化喷砂除锈设备 | 送料机_高速冲床送料机_NC伺服滚轮送料机厂家-东莞市久谐自动化设备有限公司 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 隧道窑炉,隧道窑炉厂家-山东艾瑶国际贸易 | 厂厂乐-汇聚海量采购信息的B2B微营销平台-厂厂乐官网 | 储能预警-储能消防系统-电池舱自动灭火装置-四川千页科技股份有限公司官网 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 查分易-成绩发送平台官网 | 郑州外墙清洗_郑州玻璃幕墙清洗_郑州开荒保洁-河南三恒清洗服务有限公司 | HDPE储罐_厂家-山东九州阿丽贝防腐设备 | 丁基胶边来料加工,医用活塞边角料加工,异戊二烯橡胶边来料加工-河北盛唐橡胶制品有限公司 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | Trimos测长机_测高仪_TESA_mahr,WYLER水平仪,PWB对刀仪-德瑞华测量技术(苏州)有限公司 | 光环国际-新三板公司_股票代码:838504 | 散热器-电子散热器-型材散热器-电源散热片-镇江新区宏图电子散热片厂家 | 气动隔膜泵-电动隔膜泵-循环热水泵-液下排污/螺杆/管道/化工泵「厂家」浙江绿邦 | 原色会计-合肥注册公司_合肥代理记账公司_营业执照代办 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 |