vue封装地址选择器

njupt_WHZ

已于 2023-07-03 10:08:00 修改

阅读量447

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-03 09:53:54 首次发布

本文链接：https://blog.csdn.net/WERTYUIOPOU/article/details/131510002

版权

readme

```javascript
国内地址选择器：

index1.vue是 选择 省 市 县 三级
index2.vue是 选择 省 市 县  乡镇 四级
使用方法：
    以index1.vue为例：（index2.vue相同）
        1、引入：
        import ChooseArea from '@/components/ChooseArea/index1.vue'
        2、使用： 
        <ChooseArea @get-area="getArea"></ChooseArea>
        自定义方法回调：
        const areacode=ref([]) //接收地址代码
        const areaname=ref([])  //接收地址名称
        const getArea=(val)=>{
            areacode.value=val.code
            areaname.value=val.name
        }
地址数据 位置：
三级地址：import data from '@/assets/pca-code.json'
四级地址：import data from '@/assets/pcas-code.json'

index1.vue

<script setup>
import { watch } from 'vue';
import {ref} from 'vue'
import data from '@/assets/pca-code.json'
const emit=defineEmits(['get-area'])
const province=ref('')//省
const city=ref('')//市
const area=ref('')//区

const All=ref(data)//总数据
const cityArr=ref([])//市的数据
const areaArr=ref([])//区的数据
//监听：
watch(province,(newProvince)=>{
    //点击省 寻找对应的市
    if(newProvince){
        cityArr.value=All.value.find(item=>item.code===newProvince).children 
        city.value=''
        area.value=''
    } 
})
watch(city,(newCity)=>{
    //点击市 寻找对应的区
    if(newCity){
        areaArr.value= cityArr.value.find(item=>item.code===newCity).children
        area.value='' 
    }
})
//改变了 区 将所有数据发送给父组件
 const emitArea=(type)=>{
    let areacode=[]
    let areaname=[]
    if(type===1){  

        areaname[0]=All.value.find(item=>item.code===province.value).name
        areacode[0]=province.value
    }else if(type===2){     
        areaname[0]=All.value.find(item=>item.code===province.value).name
        areaname[1]=cityArr.value.find(item=>item.code===city.value).name
        areacode[0]=province.value
        areacode[1]=city.value
    }else{
        areaname[0]=All.value.find(item=>item.code===province.value).name
        areaname[1]=cityArr.value.find(item=>item.code===city.value).name
        areaname[2]=areaArr.value.find(item=>item.code===area.value).name
        areacode[0]=province.value
        areacode[1]=city.value
        areacode[2]=area.value
    }
    emit('get-area',{code:areacode,name:areaname}) 
 }
</script>


<template>
<el-select v-model="province" class="m-2" placeholder="请选择省" size="large"   @change="emitArea(1)">
    <el-option
      v-for="item in All"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select v-model="city" class="m-2" placeholder="请选择市" size="large"  :disabled="!province"   @change="emitArea(2)">
    <!-- 没选择省不能选择市 -->
    <el-option
      v-for="item in cityArr"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select v-model="area" class="m-2" placeholder="请选择区（县、市）" size="large" :disabled="!city"  @change="emitArea(3)" >
    <!-- 没选择市不能选择区 -->
    <el-option
      v-for="item in areaArr"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>


<style scoped lang="scss">
.el-select{
    margin:5px
}
</style>

index2.vue

<script setup>
import { watch } from 'vue';
import {ref} from 'vue'
import data from '@/assets/pcas-code.json'
const emit=defineEmits(['get-area'])
const province=ref('')//省
const city=ref('')//市
const area=ref('')//区
const street=ref('')//街道（镇）

const All=ref(data)//总数据
const cityArr=ref([])//市的数据
const areaArr=ref([])//区的数据
const streetArr=ref([])//街道的数据
//监听：
watch(province,(newProvince)=>{
    //点击省 寻找对应的市
    if(newProvince){
        cityArr.value=All.value.find(item=>item.code===newProvince).children 
        city.value=''
        area.value=''
        street.value=''
    } 
})
watch(city,(newCity)=>{
    //点击市 寻找对应的区
    if(newCity){
        areaArr.value= cityArr.value.find(item=>item.code===newCity).children
        area.value='' 
        street.value=''
    }
})
watch(area,(newArea)=>{
    //点击市 寻找对应的区
    if(newArea){
        streetArr.value= areaArr.value.find(item=>item.code===newArea).children
        street.value='' 
    }
})


//改变了   将所有数据发送给父组件
 const emitArea=(type)=>{
    let areacode=[]
    let areaname=[]
    if(type===1){  

        areaname[0]=All.value.find(item=>item.code===province.value).name
        areacode[0]=province.value
    }else if(type===2){     
        areaname[0]=All.value.find(item=>item.code===province.value).name
        areaname[1]=cityArr.value.find(item=>item.code===city.value).name
        areacode[0]=province.value
        areacode[1]=city.value
    }else if(type===3){
        areaname[0]=All.value.find(item=>item.code===province.value).name
        areaname[1]=cityArr.value.find(item=>item.code===city.value).name
        areaname[2]=areaArr.value.find(item=>item.code===area.value).name
        areacode[0]=province.value
        areacode[1]=city.value
        areacode[2]=area.value
    }else{
        areaname[0]=All.value.find(item=>item.code===province.value).name
        areaname[1]=cityArr.value.find(item=>item.code===city.value).name
        areaname[2]=areaArr.value.find(item=>item.code===area.value).name
        areaname[3]=streetArr.value.find(item=>item.code===street.value).name
        areacode[0]=province.value
        areacode[1]=city.value
        areacode[2]=area.value
        areacode[3]=street.value
    }
    emit('get-area',{code:areacode,name:areaname}) 
 }
</script>


<template>
<el-select v-model="province" class="m-2" placeholder="请选择省" size="large"   @change="emitArea(1)">
    <el-option
      v-for="item in All"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select v-model="city" class="m-2" placeholder="请选择市" size="large"  :disabled="!province"   @change="emitArea(2)">
    <!-- 没选择省不能选择市 -->
    <el-option
      v-for="item in cityArr"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select v-model="area" class="m-2" placeholder="请选择区（县、市）" size="large" :disabled="!city"  @change="emitArea(3)" >
    <!-- 没选择市不能选择区 -->
    <el-option
      v-for="item in areaArr"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select v-model="street" class="m-2" placeholder="请选择街道（乡镇）" size="large" :disabled="!area"  @change="emitArea(4)" >
    <!-- 没选择区不能选择街道 -->
    <el-option
      v-for="item in streetArr"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>


<style scoped lang="scss">
.el-select{
    margin:5px
}
</style>