vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問題
vue在antDesign或elementUI組件native事件中觸發(fā)2次
打印event.target
核心思想是設(shè)置下event.target的過濾
運用ant-design-vue組件庫,且在項目中遇到的問題
難以改變的默認(rèn)樣式
可能大家在運用到組件庫的時候都會遇到要改變其組件自帶的樣式,組件自帶的都難以去改變,下面來看看,這種方法很有效果。。。。。
首先,!important
對于一般的組件樣式,找到你要改變其組件的class名,在樣式后加上!important,它的權(quán)重比較高,。
.ant-select { width: 145px !important; } .happy-scroll-content { width: 100% !important; }
其次,/deep/
/deep/ .happy-scroll-content { width: 100% !important; }
最后,如果以上兩個都不好用,::v-deep最好的選擇
::v-deep .ant-col { margin-bottom: 7px; }
讓通知提醒框的內(nèi)容自動換行
一撮內(nèi)容,在js的地盤,也不可能讓我在里面插入個<br/>或者\n,而且還是從后端返回的多條數(shù)據(jù),最終還是解決了…
沒改變之前,是這個樣子的
openNotification() { this.$notification.open({ message: 'Notification Title', description: 'I will never close automatically. I will be close automatically. I will never close automatically.', duration: 0, }); },
運用了descriptionAPI的特性,function(h),可以理解是vue里的一個render函數(shù)里面的createElement,這里就不過多講解,直接貼代碼了,效果如下:
this.$notification[type]({ message: h=>{return h('div',{style:{'font-size':'14px'}},str)}, description: h => { return h("div",this.tips.map(function(item){ return h('li',{style:{'font-size':'12px'}},item)//可以改變其li的樣式 })); }, duration: 10, });
table組件表格出現(xiàn)時間時,格式問題
對于后端返回的數(shù)據(jù),有的數(shù)據(jù)直接渲染就可以,但是有的還要改變其格式,方可展示,那就用到了customRender,當(dāng)然也少不了時間格式的轉(zhuǎn)換moment
import moment from "moment"; const formatterTime = val => { return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : ""; };
在需要改變的數(shù)據(jù)columns中,加上customRender,就能實現(xiàn)時間格式的轉(zhuǎn)換了
{ title: "上傳時間", dataIndex: "updateTime", width: '20%', customRender: (text, row, index) => { return ( <a style="color:#000" href="javascript:;" rel="external nofollow" > {formatterTime(text)} </a> ); } },
當(dāng)你遇到這樣的bug時,可能出現(xiàn)了這樣的問題
vue.runtime.esm.js?0261:619 [Vue warn]: Error in render: “TypeError:
Cannot read property ‘0’ of undefined”
出現(xiàn)這個錯誤的原因其實是Vue在拿到數(shù)據(jù)之前就渲染了dom,那么在你的html結(jié)構(gòu)中加上v-if,某個數(shù)據(jù)的長度,如:
v-if="dataList.length>0
“ReferenceError: h is not defined”
原因:在用到colums,沒放到data里定義,會報錯
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+axios實現(xiàn)統(tǒng)一接口管理的方法
這篇文章主要介紹了Vue+axios實現(xiàn)統(tǒng)一接口管理的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結(jié)合實例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決
這篇文章主要介紹了Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Vue?socket.io模塊實現(xiàn)聊天室流程詳解
vue-socket.io其實是在socket.io-client(在瀏覽器和服務(wù)器之間實現(xiàn)實時、雙向和基于事件的通信)基礎(chǔ)上做了一層封裝,將socket掛載到vue實例上,同時可使用sockets對象輕松實現(xiàn)組件化的事件監(jiān)聽,在vue項目中使用起來更方便2022-12-12vue 打包后的文件部署到express服務(wù)器上的方法
vue是目前最流行的前端框架,今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開發(fā),下面通過本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法,感興趣的朋友一起看看吧2017-08-08vue2 設(shè)置router-view默認(rèn)路徑的實例
今天小編就為大家分享一篇vue2 設(shè)置router-view默認(rèn)路徑的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計,編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法,一起看看吧2021-12-12