vue實(shí)戰(zhàn)問題,項(xiàng)目經(jīng)驗(yàn)。

人是個(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()鉤子中使用。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容