Vue3+ Naive UI做一个行政区选择器

行政区信息的获取

这里用到的行政区信息是从高德开放平台获取的,地址是:
https://developer.amap.com/api/webservice/guide/api/district
如果信息只需要获取一次的话,其实并不需要注册,直接页面下方的服务示例中查询就可以:
在这里插入图片描述
打开开发人员工具,再次点击查询按钮,这时再开发人员工具的“网络”界面中,会看到刚刚发出来一条查询请求:
在这里插入图片描述
右键选中这条请求记录,选择“复制响应”,然后打开记事本或者其他编辑器,就可以保存查询结果了。
在这里插入图片描述
在这里插入图片描述

组件编写

保存成数据对象

打开Vue项目,新建一个TS或JS文件,对刚才的文本字段掐头去尾,保留所有省的信息为一个数组,
在这里插入图片描述
在这里插入图片描述

组件编写

这里以NaiveUI 为例进行组件制作,当然也可以使用其他模板,但是需要注意性能问题。
数据的提取主要通过Vue计算属性实现,在数据JSON结构中筛选不同层级的数据。
然后通过Vue监听属性,将变量的变化传递出去。

<template>
  <n-space>
    <n-select v-model:value="l1" :options="level1" @update-value="l2='';l3=''"></n-select>
    <n-select v-model:value="l2" :options="level2" @update-value="l3=''"></n-select>
    <n-select v-model:value="l3" :options="level3"></n-select>
  </n-space>
</template>

<script>
import districts from "../assets/data/districts";

export default {
  name: "selectDistrict",
  data() {
    return {
      l1: '',
      l2: '',
      l3: '',
      d: ''
    }
  },
  computed: {
    level1() {
      var dis = []
      for (let i in districts) {
        dis.push({label: districts[i].name, value: i})
      }
      return dis
    },
    level2() {
      if (this.l1 == '')
        return []
      var dis = []
      let ddd = districts[this.l1].districts
      for (let i in ddd) {
        dis.push({label: ddd[i].name, value: i})
      }
      return dis
    },
    level3() {
      if (this.l2 == '')
        return []
      var dis = []
      let ddd = districts[this.l1].districts[this.l2].districts
      for (let i in ddd) {
        dis.push({label: ddd[i].name, value: i})
      }
      return dis
    },
    district() {
      if (this.l1 == '' || this.l2 == '')
        return {}

      let d = districts[this.l1].districts[this.l2]
      if (d.districts.length > 0 && this.l3 != '')
        d = d.districts[this.l3]

      let loc = d.center.split(',')
      //d.lng=loc[0]
      d.lng = parseFloat(loc[0])
      d.lat = parseFloat(loc[1])
      console.log(d)
      this.d = d;
      return d
    }

  },
  watch: {
    district(newvalue, oldvalue) {
      this.$emit("selectedDistrict", newvalue);
    }
  }
}
</script>

<style scoped>
.n-select {
  width: 100px;
}
</style>

组件使用

使用此组件直接在父组件中使用如下代码即可

 <select-district @selectedDistrict="(e)=>{this.district=e}"></select-district>

在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高堂明镜悲白发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值