Vue如何使用vue-area-linkage實現地址三級聯動效果

        很多時候我們需要使用地址三級聯動，即省市區三級聯動。網上有很多插件，在此介紹Vue的一款地區聯動插件：vue-area-linkage，下面介紹如何使用這個插件實現地址聯動效果：

        1.安裝vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 

 

        2.在main.js上進行依賴注入，如下圖所示：

 

        3.在對應vue文件的template模板上寫html標簽，如下圖所示：

        4.在對應vue文件的script上進行data默認，如下圖所示：

        此時效果已經基本實現，如下圖所示：

        注意：該插件有多種聯動效果，我這里做的是省市區街四級聯動，所以 :level='3'。需要其他效果可去網上查詢其他效果代碼， 點擊查看。

 

        5.大家可以看到只是出現基本的效果，而樣式看起來很不舒服，這是因為該插件的UI基於Element UI，所以如果需要使用樣式需要依賴Element UI。但是很多情況下設計圖的樣式都是我們自定義的，此時可以自行修改樣式代碼，只需要在文件中寫多一個公共的style文件修改對應的類名樣式來覆蓋之前的樣式代碼即可，需注意這個style文件不可以加上scoped，如下圖紅框所示：

        此時效果如下圖所示：

        如需轉載請注明出處： http://www.cnblogs.com/zishang91/p/7804902.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！