詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得
更新時間：2018年05月07日 14:00:32 作者：小爬蝦
這篇文章主要介紹了詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
廢話不多說，直接進(jìn)入正題。
安裝，引用，這些直接從官網(wǎng)拷貝來的，就不多說了。
1、安裝
使用 npm 安裝：
npm install v-distpicker --save
使用 yarn 安裝
yarn add v-distpicker --save
2、使用
注冊組件
注冊全局組件
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker);
注冊組件
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
簡單使用
基礎(chǔ)
<v-distpicker></v-distpicker>
默認(rèn)值
<v-distpicker province="廣東省" city="廣州市" area="海珠區(qū)"></v-distpicker>
移動端
<v-distpicker type="mobile"></v-distpicker>
3、下面是重點
獲取選擇的值
<template>
<button @click="choose">點我選擇區(qū)域</button>
<div class="divwrap" v-if="show">
<v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
</div>
</template>
在你引用 v-distpicker 的父組件里面定義幾個方法來獲取選擇的值。
<script>
import VDistpicker from 'v-distpicker'
export default {
name: 'getAddress',
components: { VDistpicker },
data() {
return {
show:false,
}
},
methods: {
choose(){
this.show=!this.show
},
onChangeProvince(a){
console.log(a)
},
onChangeCity(a){
console.log(a)
},
onChangeArea(a){
console.log(a)
this.show=false
}
},
}
4、樣式
你是不是感覺彈出的樣式很丑？
OK，下面來改改樣式
<style scoped>
.divwrap{
height: 400px;
overflow-y: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.divwrap>>>.distpicker-address-wrapper{
color: #999;
}
.divwrap>>>.address-header{
position: fixed;
bottom: 400px;
width: 100%;
background: #000;
color:#fff;
}
.divwrap>>>.address-header ul li{
flex-grow: 1;
text-align: center;
}
.divwrap>>>.address-header .active{
color: #fff;
border-bottom:#666 solid 8px
}
.divwrap>>>.address-container .active{
color: #000;
}
</style>
OK，我要說的完了。。以上只是拋磚引玉，誰有更多的使用心得，請不吝評論
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解Vue爬坑之vuex初識 ，Vue 的狀態(tài)管理工具 Vuex可以解決大型項目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下2017-06-06
Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項目中有個場景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動等功能,這篇文章主要介紹了Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue 進(jìn)階之實現(xiàn)父子組件間的傳值，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
npm無法加載文件：因為在此系統(tǒng)上禁止運(yùn)行腳本的解決辦法
這篇文章主要介紹了npm無法加載文件：因為在此系統(tǒng)上禁止運(yùn)行腳本問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue-列表下詳情的展開與折疊案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了Vue實現(xiàn)訂單支付倒計時功能,倒計時這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
解決‘vue-cli-service‘不是內(nèi)部或外部命令,也不是可運(yùn)行的程序問題
遇到'vue-cli-service'不是內(nèi)部或外部命令的錯誤通常因為VueCLI未正確安裝或配置,解決步驟包括確保VueCLI全局安裝、檢查項目依賴、安裝項目依賴、清理并重新安裝依賴以及使用npm腳本調(diào)用vue-cli-service,按步驟操作后應(yīng)能解決問題2024-11-11
本篇文章主要介紹了VsCode新建VueJs項目的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)移動端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動應(yīng)用程序時,經(jīng)常需要使用各種UI組件,其中el-table是一個常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09