v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
更新時(shí)間：2024年02月02日 10:56:36 作者：濤聲依在
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下
1、參考文檔：https://jcc.github.io/v-distpicker/
2、在vue中安裝
npm install --save v-distpicker
3、在vue中引用
局部引入方式：
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker',VDistpicker)全局引入：在src目錄下的main.js文件中添加引入代碼
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}4、基礎(chǔ)實(shí)現(xiàn)
<template>
<div>
<v-distpicker
:province="form.province"
:city="form.city"
:area="form.area"
@province="vDistpickerHandle($event,'province')"
@city="vDistpickerHandle($event,'city')"
@area="vDistpickerHandle($event,'area')"
></v-distpicker>
</div>
</template>
<script>
// 引入地區(qū)選擇
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
data(){
return{
form: {
province: '',
city: '',
area: ''
},
}
},
methods:{
vDistpickerHandle(event,value){
console.log(event);
console.log(event.value);
this.form[value]=event.value
},
}
}
</script>代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理，將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中，方便數(shù)據(jù)提交。
到此這篇關(guān)于v-distpicker地區(qū)選擇器組件使用的文章就介紹到這了,更多相關(guān)v-distpicker地區(qū)選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vue和React受控組件的區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
在Vue3中實(shí)現(xiàn)一個(gè)自定義的v-html組件方式
文章介紹了Vue.js中的v-html指令及其潛在的安全風(fēng)險(xiǎn),然后通過(guò)DOMParser實(shí)現(xiàn)了一個(gè)自定義的v-html組件,以提高安全性并避免XSS攻擊2025-11-11
這篇文章主要介紹了vant-List-@load事件一直觸發(fā)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件
這篇文章主要為大家詳細(xì)介紹了vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue前端高效開(kāi)發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來(lái)處理組件元素的循環(huán)迭代邏輯,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
在開(kāi)發(fā)中發(fā)現(xiàn)其中一個(gè)頁(yè)面moutned調(diào)用了兩次，而其他頁(yè)面正常，表示很懵逼，然后查找原因，終于找到了，其實(shí)歸根到底是要知道m(xù)ounted的調(diào)用機(jī)制問(wèn)題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下2018-10-10
vue組件傳值的實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js組建傳值的三種實(shí)現(xiàn)方式,包括父?jìng)髯印⒆觽鞲讣胺歉缸觽髦?需要的朋友可以參考下2020-02-02
vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例
這篇文章主要介紹了vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在vue項(xiàng)目中使用sass語(yǔ)法問(wèn)題
sass是一個(gè)最初由Hampton Catlin設(shè)計(jì)并由Natalie Weizenbaum開(kāi)發(fā)的層疊樣式表語(yǔ)言。這篇文章主要介紹了在vue項(xiàng)目中使用sass語(yǔ)法,需要的朋友可以參考下2019-07-07
Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐
在Vue3中,有時(shí)我們需要直接操作DOM節(jié)點(diǎn)，本文主要介紹了Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08