? ? ? 最近寫的項(xiàng)目是vue框架，搭配element-ui框架。這個(gè)框架上手快，而且頁(yè)面的大部分樣式都有現(xiàn)成的可以用，使用起來(lái)比較方便。前幾天有一個(gè)需求是要寫省市區(qū)聯(lián)動(dòng)選擇，上網(wǎng)搜羅了一遍之后發(fā)現(xiàn)了vue-area-linkage這個(gè)插件，應(yīng)該是專門為vue準(zhǔn)備的插件，下面開始介紹這個(gè)插件的使用方法。

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

插件使用之后的樣子

下面開始介紹遇到的坑以及解決辦法：

1.樣式問題：

? ? ? 這個(gè)問題比較好解決，去到依賴包中，查找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)的問題是，如果先點(diǎn)擊編輯，會(huì)直接顯示接口返回的地址，然后再點(diǎn)擊新增，還會(huì)顯示剛剛編輯的地址，即使清除 v-model 綁定的數(shù)據(jù)也清除不掉顯示的內(nèi)容（坑）。

? ? ? 下面開始講述我的踩坑之路：

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

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

? ? ? ? 那要不看看源碼?？吹搅嗽创a，找到了對(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，完美解決，下班。

坑還是要繼續(xù)踩的，畢竟這是必經(jīng)之路（苦笑），隨手點(diǎn)贊，心想事成。