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)文章
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3+xgplayer實(shí)現(xiàn)短視頻功能詳解
短視頻應(yīng)用的流暢性和用戶交互性在用戶體驗(yàn)中扮演著重要角色,本文將展示如何通過?Vue?3?和?XGPlayer來實(shí)現(xiàn)這些功能,感興趣的小伙伴可以了解下2025-02-02
使用setup的情況下這個(gè)時(shí)候我們無法使用this,注意在setup中setup是封閉的,不會(huì)將子組件事件暴露出來,所以要用defineExpose(),這篇文章主要介紹了vue3 setup訪問子組件的 DOM 元素,需要的朋友可以參考下2023-08-08
Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
在vue項(xiàng)目中和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),它是基于promise的http庫(kù),可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue選項(xiàng)卡組件的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue選項(xiàng)卡組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
對(duì)于vue下的雙向綁定功能，個(gè)人理解為在處理邏輯的過程中緩存了大量的node對(duì)象，node對(duì)象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對(duì)象，那么在用的過程中哪里需要改變就把node拿出來，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定2021-06-06