人是個(gè)健忘的動(dòng)物,或者說(shuō)我是個(gè)健忘的人。
我得好好記一下遇到的一些問題和解決方式,這樣以后再遇到可以不用抓耳撓腮我做過的,我會(huì)的,怎么做來(lái)著?讓我想想!麻蛋的想不起來(lái)了,好像是這樣子?不對(duì)!媽的百度看看。
像你嗎個(gè)二百五!好記性不如爛筆頭,爛筆頭不如簡(jiǎn)書寫一篇。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
首頁(yè)頭部欄的搜索功能,全局搜索。
直接跳轉(zhuǎn)查詢界面,然后這個(gè)很簡(jiǎn)單,輸入框回車事件push到查詢界面,然后將值一塊兒帶過去,初始化查詢界面。
可是問題來(lái)了,現(xiàn)在查詢這個(gè)組件里繼續(xù)輸入然后回車。這時(shí)候路由是沒變化的,組件里的鉤子也不會(huì)再次執(zhí)行。怎么監(jiān)測(cè)到搜索內(nèi)容變化呢。
首先想到的是監(jiān)測(cè)路由數(shù)據(jù)變化,后來(lái)發(fā)現(xiàn)太low,
再次想到的是監(jiān)測(cè)vuex數(shù)據(jù),搞了半天還是不行。
最后使用了非父子組件傳值,
建立一個(gè)bus文件,文件建一個(gè)bus.js
內(nèi)容就是引入vue,建立一個(gè)空的vue實(shí)例。
在頭部搜索欄的組件里引入bus,用bus.$emit()觸發(fā)一個(gè)事件傳值,也就是搜索框的回車時(shí)觸發(fā)。在查詢界面引入bus,之后bus.$on()得到數(shù)據(jù)變化。然后做出相應(yīng)的操作。
這里要注意一定不能使用bus.$(‘value',function(val){});因?yàn)檫@樣的話,你的函數(shù)里的this會(huì)指向空實(shí)例bus。所以我們必須使用es6的寫法,val => {};這樣的話this會(huì)指向當(dāng)前查詢界面的實(shí)例。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
vue打印功能,window.open(url}這個(gè)東西很多bug。第一用戶體驗(yàn),用戶必須允許否則就無(wú)法彈出,第二響應(yīng)時(shí)間超過一定時(shí)間則無(wú)法彈出。
解決方法:
跳轉(zhuǎn)一個(gè)指定界面,然后重定向。
var newWindow= window.open('')
setTimout(()=>{
? ? newWindow.location.href = '新的url'
},3000);
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
軟刪除數(shù)據(jù)如何過濾
我們的網(wǎng)站刪除如果是后臺(tái)數(shù)據(jù)庫(kù)已有數(shù)據(jù)是不能硬刪除的,只能修改某個(gè)字段然后標(biāo)記為刪除,叫做軟刪除。
這樣的話我們的前端界面渲染時(shí)就需要過濾掉你剛剛刪除的數(shù)據(jù)
我的項(xiàng)目里是用的table然后給了tableData | filterData
filterData:
var newData = [];
for(let key of tableData){
? ? if(key.removed !== 1){ newData.push(key) }
? ? return newData
}
簡(jiǎn)單解釋:就是全局過濾器獲取原數(shù)據(jù),然后如果某個(gè)字段是已經(jīng)刪除了,也就是軟刪除改變了字段的數(shù)據(jù),就不管他了,其他的就生成一個(gè)新數(shù)組然后返回。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
共用界面如何刷新
項(xiàng)目里一個(gè)費(fèi)用申報(bào)單界面是共用的,很多地方過來(lái)查看和編輯也是這個(gè)路由這個(gè)組件,只是很多input的內(nèi)容是空或者是不能編輯只能看。
問題來(lái)了,你來(lái)到這個(gè)界面后查看完了突然想我想現(xiàn)在編輯一個(gè)申報(bào)單,可是此時(shí)此刻你點(diǎn)擊路由這個(gè)組件是不會(huì)更新的,因?yàn)関ue覺得你已經(jīng)在這個(gè)界面了,他是不會(huì)理你的。
使用過幾個(gè)路由鉤子,什么routerberfor……,什么放在app.vue里,都只能檢測(cè)到路由離開進(jìn)來(lái)的變化,而無(wú)法就在當(dāng)前路由點(diǎn)擊當(dāng)前路由的辯護(hù)。
解決方法使用watch 監(jiān)測(cè)路由
//監(jiān)視路由變化,然后初始化界面。
? watch: {
? ? '$route' (to, from) {
? ? ? ? alert('路由改變了');
? ? }
? }
路由配置:
path:url/:val
不管是插件還是你自己寫的頭部菜單,都一定有一個(gè)事件監(jiān)聽到你點(diǎn)擊當(dāng)前路由。在這個(gè)事件里我們來(lái)處理
let val = new Date();
this.$router.push({
? ? path: url/val
})
這樣你就可以在你的組件里監(jiān)聽到路由變化了。然后也就可以做出相應(yīng)的操作。原理就是利用參數(shù)的變化唄,時(shí)間new出來(lái)的永遠(yuǎn)都是不一樣的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
表單重置
項(xiàng)目中很多時(shí)候界面的數(shù)據(jù)不需要清除,但是一些操作會(huì)觸發(fā)驗(yàn)證事件,然后一串紅字你不達(dá)到條件就不會(huì)消失,這時(shí)候很難受,所以就有了重置表單的驗(yàn)證。
關(guān)于表單重置,我使用的是element-ui自帶的resetFields()事件。
我們唯一要注意的是,不能再created()鉤子中使用,因?yàn)閠his.$refs[formname]中的ref,一定要加載完后才能找到的。否則會(huì)報(bào)錯(cuò)說(shuō)你resetFields()事件未定義。所以一定要在mounted()鉤子中使用。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++