溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果

發(fā)布時(shí)間：2020-09-06 19:35:11 來源：腳本之家 閱讀：243 作者：月光光 欄目：web開發(fā)

這是一個(gè)基于Vue2的簡易省市區(qū)縣三級(jí)聯(lián)動(dòng)組件，可以控制只顯示省級(jí)或只顯示省市兩級(jí)，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。

安裝

我們使用npm安裝：

npm install v-distpicker --save

使用

首先在模板中加入組件：

<v-distpicker></v-distpicker>

如果要帶默認(rèn)值，則可以這樣：

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

然后在js部分調(diào)用組件：

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

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

屬性配置

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

方法

方法 說明 參數(shù)
province 選擇省份 返回省份的值
city 選擇城市 返回城市的值
area 選擇地區(qū) 返回地區(qū)的值
selected 選擇最后一項(xiàng)時(shí)觸發(fā) 返回省市區(qū)的值

項(xiàng)目地址：https://github.com/jcc/v-distpicker

總結(jié)

以上所述是小編給大家介紹的基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手