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

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

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

瀏覽:2日期: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
相關文章:
主站蜘蛛池模板: 恒温水槽与水浴锅-上海熙浩实业有限公司 | 气动|电动调节阀|球阀|蝶阀-自力式调节阀-上海渠工阀门管道工程有限公司 | 锂电叉车,电动叉车_厂家-山东博峻智能科技有限公司 | 电磁流量计_智能防腐防爆管道式计量表-金湖凯铭仪表有限公司 | 高柔性拖链电缆_卷筒电缆_耐磨耐折聚氨酯电缆-玖泰特种电缆 | 精益专家 - 设备管理软件|HSE管理系统|设备管理系统|EHS安全管理系统 | 仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院 | 数字展示在线_数字展示行业门户网站 | 喷播机厂家_二手喷播机租赁_水泥浆洒布机-河南青山绿水机电设备有限公司 | 快速门厂家-快速卷帘门-工业快速门-硬质快速门-西朗门业 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 步进驱动器「一体化」步进电机品牌厂家-一体式步进驱动 | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 机床主轴维修|刀塔维修|C轴维修-常州翔高精密机械有限公司 | 玖容气动液压设备有限公司-气液增压缸_压力机_增压机_铆接机_增压器 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 双舌接地线-PC68数字式高阻计-ZC36|苏海百科 | 河南生物显微镜,全自动冰冻切片机-河南荣程联合科技有限公司 | 宁波普瑞思邻苯二甲酸盐检测仪,ROHS2.0检测设备,ROHS2.0测试仪厂家 | 楼承板-开口楼承板-闭口楼承板-无锡海逵 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 挖掘机挖斗和铲斗生产厂家选择徐州崛起机械制造有限公司 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | atcc网站,sigma试剂价格,肿瘤细胞现货,人结肠癌细胞株购买-南京科佰生物 | 打包钢带,铁皮打包带,烤蓝打包带-高密市金和金属制品厂 | 网站建设_网站制作_SEO优化推广_百度推广开户_朋友圈网络科技 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | OpenI 启智 新一代人工智能开源开放平台| 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 吉林污水处理公司,长春工业污水处理设备,净水设备-长春易洁环保科技有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 无线联网门锁|校园联网门锁|学校智能门锁|公租房智能门锁|保障房管理系统-KEENZY中科易安 | 仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院 | 柴油机_柴油发电机_厂家_品牌-江苏卡得城仕发动机有限公司 | 小型手持气象站-空气负氧离子监测站-多要素微气象传感器-山东天合环境科技有限公司 |