基于Vue2實現簡易的省市區縣三級聯動組件效果

發布時間：2020-09-06 19:35:11 來源：腳本之家閱讀：253 作者：月光光欄目：web開發

這是一個基于Vue2的簡易省市區縣三級聯動組件，可以控制只顯示省級或只顯示省市兩級，可設置默認值等。提供原始省市縣代碼和名稱數據，適用于各種有關城市區縣的應用。

安裝

我們使用npm安裝：

npm install v-distpicker --save

使用

首先在模板中加入組件：

<v-distpicker></v-distpicker>

如果要帶默認值，則可以這樣：

<v-distpicker province="廣東省" city="廣州市" area="海珠區"></v-distpicker>

然后在js部分調用組件：

<script>
import VDistpicker from 'v-distpicker'
export default {
 name: 'App',
 components: {
  VDistpicker
 }
}
</script>

這樣就可以了，如果要使用更多屬性配置和方法請參照以下兩個表格。

屬性配置

參數	說明	類型	可選值	默認值
province	省份（選填）	String	省份名	null
city	城市（選填）	String	城市名	null
area	地區（選填）	String	地區名	null
type	類型（選填，默認 select）	String	mobile	null
disabled	是否禁用（選填，默認 false，且 type='mobile' 時無效）	Boolean	true, false	false
hide-area	隱藏地區（選填）	Boolean	true, false	false
onlu-province	只顯示省份（選填）	Boolean	true, false	false
static-placeholder	是否將占位符顯示為已經選擇的項（僅 type='mobile' 時有效）	Boolean	true, false	false
placeholders	占位符（選填）	Object	province, city, area	{ province: '省', city: '市', area: '區' }
wrapper	外層 Class（選填）	String	customize	address
address-header	address-header 樣式（選填，類型必須為 mobile）	String	customize	address-header
address-container	address-container 樣式（選填，類型必須為 mobile）	String	customize	address-contaniner

方法

項目地址：https://github.com/jcc/v-distpicker

總結

以上所述是小編給大家介紹的基于Vue2實現簡易的省市區縣三級聯動組件效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站