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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue3+xgplayer實(shí)現(xiàn)短視頻功能詳解
短視頻應(yīng)用的流暢性和用戶(hù)交互性在用戶(hù)體驗(yàn)中扮演著重要角色,本文將展示如何通過(guò)?Vue?3?和?XGPlayer來(lái)實(shí)現(xiàn)這些功能,感興趣的小伙伴可以了解下
2025-02-02
vue3 setup訪問(wèn)子組件的 DOM 元素的示例代碼
使用setup的情況下這個(gè)時(shí)候我們無(wú)法使用this,注意在setup中setup是封閉的,不會(huì)將子組件事件暴露出來(lái),所以要用defineExpose(),這篇文章主要介紹了vue3 setup訪問(wèn)子組件的 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
vue實(shí)現(xiàn)頂部菜單欄
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue中Axios的封裝與接口管理詳解
在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)聽(tīng)路由變化的幾種方式小結(jié)
這篇文章主要介紹了vue監(jiān)聽(tīng)路由變化的幾種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過(guò)程
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è)人理解為在處理邏輯的過(guò)程中緩存了大量的node對(duì)象，node對(duì)象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對(duì)象，那么在用的過(guò)程中哪里需要改變就把node拿出來(lái)，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定
2021-06-06