vue-area-linkage走過(guò)的坑有哪些

這篇文章主要為大家展示了“vue-area-linkage走過(guò)的坑有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-area-linkage走過(guò)的坑有哪些”這篇文章吧。

官網(wǎng)介紹的很詳細(xì)了，我就不贅述了vue-area-linkage 安裝及使用方法。

插件使用之后的樣子

下面開(kāi)始介紹遇到的坑以及解決辦法：

1.樣式問(wèn)題：

這個(gè)問(wèn)題比較好解決，去到依賴包中，查找css文件，找到對(duì)應(yīng)的元素修改樣式即可。因?yàn)槲业氖侨侄家薷臉邮?，所以我直接在依賴包中改。如果不是全局要改的樣式，只是某個(gè)頁(yè)面需要的樣式就要在自己的css文件里面單獨(dú)改，避免全局污染。

修改全局樣式的文件

2.打包時(shí)出現(xiàn) “Module not found: Error: Cant`t resolve 'vue-area-linkage/dist/index.css' in '/app/src/views/devcie'”

在 main.js 中全局注入文件，然后再在文件中注入：

main.js 中注入

文件中注入

3.有需求是新增和編輯，我寫的邏輯是一套代碼，控制顯示隱藏，此為背景。出現(xiàn)的問(wèn)題是，如果先點(diǎn)擊編輯，會(huì)直接顯示接口返回的地址，然后再點(diǎn)擊新增，還會(huì)顯示剛剛編輯的地址，即使清除 v-model 綁定的數(shù)據(jù)也清除不掉顯示的內(nèi)容（坑）。

下面開(kāi)始講述我的踩坑之路：

既然一套代碼不行，那就兩套代碼咯。立馬復(fù)制粘貼，what f***，這代碼也太多了，而且邏輯還得改，保存還得改，果斷放棄。對(duì)自己還得有點(diǎn)要求才行。

那要不新增的時(shí)候重置這個(gè)置，于是把值置為空，不好使；那要不控制一下 placeholder，不好使；使用jq控制一下 placeholder , 不好使，果斷放棄。

那要不看看源碼。看到了源碼，找到了對(duì)應(yīng)的方法 area_cascader_render , debugger 之后，發(fā)現(xiàn)在進(jìn)入頁(yè)面的時(shí)候會(huì)渲染一下頁(yè)面，然后就不會(huì)繼續(xù)渲染了，不渲染，那值自然就是之前的值。思考了一下，想到如果我在保存或者返回頁(yè)面的時(shí)候銷毀這個(gè)組件，然后在新增的時(shí)候不就可以重新渲染了嗎，于是果斷 v-if ，保存返回的時(shí)候置為false，新增置為true，完美解決。

以上是“vue-area-linkage走過(guò)的坑有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！