欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)

 更新時(shí)間:2017年04月28日 08:45:07   作者:苦練內(nèi)功  
本篇文章主要介紹了vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

我們?cè)?jīng)經(jīng)常會(huì)遇到需要選擇省市區(qū)的需求,我們可能是找一個(gè)插件來實(shí)現(xiàn),但是有了vue之后,我們自己完全可以簡單的實(shí)現(xiàn)這個(gè)效果,并封裝為獨(dú)立的.vue組件,便于日后使用

我們今天來實(shí)現(xiàn)一個(gè) 利用vuejs開發(fā)的 省市區(qū)三聯(lián)動(dòng)的組件  CitySelect.vue組件

首先來看一下最終的效果(沒有寫太多的樣式...)

組件所需要的省市區(qū)的JSON數(shù)據(jù)(已經(jīng)封裝為commonjs模塊了):    provinces.js

這個(gè)數(shù)據(jù)中有這樣幾個(gè)字段:

code: 當(dāng)前省市區(qū)的編碼

sheng: 當(dāng)前所在的省

name: 省市區(qū)的名字

level: 級(jí)別,省 level = 1, 市 level=2, 區(qū)/縣城 level = 3

di: 縣,市級(jí)別的區(qū)分

如何使用?

這里采用了 v-model暴露接口, 所以我們下拉選擇的值,你只需要在 v-model綁定的屬性中去拿即可

我們使用的字段是  cityInfo用于接收組件的數(shù)據(jù), 組件為了返回足夠的數(shù)據(jù), 它是一個(gè)對(duì)象

使用代碼示例  : 

App.vue

<template>
 <div id="app">
 <h5>vue 省市區(qū)三聯(lián)動(dòng) demo</h5>
 <city-select v-model="cityInfo"></city-select>
 <h6>v-model的值是 <code>{{ cityInfo }}</code></h6>
 <h6>從v-model得知,你選擇了 <i>{{ cityName }}</i></h6>
 </div>
</template>
<script>
 import CitySelect from './components/CitySelect.vue'
 export default {
 data() {
 return {
 cityInfo: '',
 }
 },
 components: {
 CitySelect
 },
 computed: {
 cityName() {
 const names = [];
 this.cityInfo.province && names.push(this.cityInfo.province.name + ' ')
 this.cityInfo.city && names.push(this.cityInfo.city.name + ' ')
 this.cityInfo.block && names.push(this.cityInfo.block.name + ' ')
 return names.join('')
 }
 }
 }
</script>
<style lang="stylus">
 h6
 padding 10px
 border 1px dotted
 h6 i
 color #f00
 border 1px dotted #ccc
</style>

cityName是我們需要展示的數(shù)據(jù),作為一個(gè)計(jì)算屬性而存在,因?yàn)檫@個(gè)值是不斷變化的,從cityInfo中抽取出來的數(shù)據(jù)

下面我們來看一下組件的實(shí)現(xiàn)代碼

CitySelect.vue

<template>
 <div class="city-select">
 <select v-model="selectedProvince" name="province">
 <option v-for="(item, index) in provinces"
 v-if="item.level === 1"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 <select v-model="selectedCity" name="city">
 <option
 v-for="(item, index) in cities"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 <select v-model="selectedBlock" name="block">
 <option
 v-for="(item, index) in blocks"
 :value="item">
 {{ item.name }}
 </option>
 </select>
 </div>
</template>
<script>
/**
 * 省 市 區(qū)/縣城 三聯(lián)動(dòng)選擇器
*/
import provinces from './provinces.js'
import Vue from 'vue'
export default {
 name: 'app',
 created() {
 // 數(shù)據(jù)初始化,默認(rèn)選中北京市,默認(rèn)選中第一個(gè);北京市數(shù)據(jù)為總數(shù)據(jù)的前18個(gè)
 let beijing = this.provinces.slice(0, 19)
 this.cities = beijing.filter(item => {
 if (item.level === 2) {
 return true
 }
 })
 this.selectedCity = this.cities[0]
 this.blocks = beijing.filter(item => {
 if (item.level === 3) {
 return true
 }
 })
 this.selectedBlock = this.blocks[0]
 },
 watch: {
 selectedProvince(newVal, oldVal) {
 // 港澳臺(tái)數(shù)據(jù)只有一級(jí),特殊處理
 if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
 this.cities = [newVal]
 this.blocks = [newVal]
 } else {
 this.cities = this.provinces.filter(item => {
  if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
  return true
  }
 })
 }
 var _this = this
 // 此時(shí)在渲染DOM,渲染結(jié)束之后再選中第一個(gè)
 Vue.nextTick(() => {
 _this.selectedCity = _this.cities[0]
 _this.$emit('input', _this.info)
 })
 },
 selectedBlock() {
 var _this = this
 Vue.nextTick(() => {
 _this.$emit('input', _this.info)
 })
 },
 selectedCity(newVal) {
 // 選擇了一個(gè)市,要選擇區(qū)了 di是城市的代表,sheng
 if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
 this.blocks = [newVal]
 this.cities = [newVal]
 } else {
 this.blocks = this.provinces.filter(item => {
  if (item.level === 3 && item.sheng && item.sheng == newVal.sheng && item.di === newVal.di && item.name !== '市轄區(qū)') {
  return true
  }
 })
 }
 var _this = this
 Vue.nextTick(() => {
 _this.selectedBlock = _this.blocks[0]
 // 觸發(fā)與 v-model相關(guān)的 input事件
 _this.$emit('input', _this.info)
 })
 }
 },
 computed: {
 info() {
 return {
 province: this.selectedProvince,
 city: this.selectedCity,
 block: this.selectedBlock
 }
 }
 },
 data() {
 return {
 selectedProvince: provinces[0],
 selectedCity: 0,
 selectedBlock: 0,
 cities: 0,
 provinces,
 blocks: 0
 }
 }
}
</script>
<style lang="stylus" scoped>
 .city-select select
 outline 0
</style>

組件關(guān)鍵點(diǎn)說明:

HTML模板采用三個(gè) select下拉控件,分別具有v-model由于綁定選擇的數(shù)據(jù),使用v-for遍歷省市區(qū)數(shù)據(jù)

data中的數(shù)據(jù),分別是選中的省市區(qū)的值(對(duì)象形式); 以及當(dāng)前這個(gè)省的城市,這個(gè)城市的區(qū),見名知意

在create鉤子函數(shù)中我們進(jìn)行了數(shù)據(jù)的初始化,默認(rèn)我們顯示北京相關(guān)的信息,改變v-model對(duì)應(yīng)的屬性值

實(shí)現(xiàn)三聯(lián)動(dòng)的重點(diǎn):

我們使用watch監(jiān)測當(dāng)前省市區(qū)的改變(v-model中綁定的數(shù)據(jù)),一旦省 有變化,就需要拉取這個(gè)省相關(guān)的數(shù)據(jù),并且默認(rèn)選中第一條數(shù)據(jù);  市,區(qū)的變化類似。

在這里我們采用了 ES5中的filter來進(jìn)行數(shù)據(jù)的過濾,我們只要把數(shù)據(jù)過濾出來了,vue自動(dòng)幫我們重新渲染,所以我們只需要把重點(diǎn)放在數(shù)據(jù)的篩選上就可以了

v-model接口的暴露:

要將數(shù)據(jù)綁定到v-model所綁定的屬性上,需要通過觸發(fā) input事件,參見 v-model的實(shí)現(xiàn)原理這篇文章

Vue.nextTick(() => {
 _this.$emit('input', _this.info)
 })

也就是這行代碼實(shí)現(xiàn)了組件內(nèi)部數(shù)據(jù)暴露的效果: v-model所綁定的cityInfo拿到了組件內(nèi)部的值

這里的 nextTick類似于setTimeout實(shí)現(xiàn)的效果,可以在執(zhí)行完其他任務(wù)(例如渲染DOM)之后再執(zhí)行相應(yīng)的回調(diào),我們使用它,可以保證我們的下一步操作是在DOM渲染完畢之后再執(zhí)行的,保證邏輯的正確性

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • vue關(guān)于Promise的使用方式

    vue關(guān)于Promise的使用方式

    這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue打包后dist文件在本地啟動(dòng)運(yùn)行的步驟

    vue打包后dist文件在本地啟動(dòng)運(yùn)行的步驟

    這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動(dòng)運(yùn)行的簡單步驟,文中通過代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-09-09
  • vue如何設(shè)置描點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)頁面

    vue如何設(shè)置描點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)頁面

    這篇文章主要介紹了vue如何設(shè)置描點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • Vue?組件之間傳值的主要方法

    Vue?組件之間傳值的主要方法

    父組件向子組件傳值,使用 props:可以通過在子組件上綁定 props,然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù),這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下
    2023-12-12
  • vue+vant 上傳圖片需要注意的地方

    vue+vant 上傳圖片需要注意的地方

    這篇文章主要介紹了vue+vant 上傳圖片需要注意的地方,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2021-01-01
  • Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案

    Vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案

    這篇文章主要介紹了vue項(xiàng)目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06
  • vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))

    vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))

    這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • Vue v-text指令簡單使用方法示例

    Vue v-text指令簡單使用方法示例

    這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實(shí)例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下
    2019-09-09
  • vue 避免變量賦值后雙向綁定的操作

    vue 避免變量賦值后雙向綁定的操作

    這篇文章主要介紹了vue 避免變量賦值后雙向綁定的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue-cli4如何打包靜態(tài)資源到指定目錄

    vue-cli4如何打包靜態(tài)資源到指定目錄

    這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論