【Vue3】vue3 + ts 封装城市选择组件

news2024/9/20 8:52:21

城市选择-基本功能

能够封装城市选择组件，并且完成基础的显示隐藏的交互功能

（1）封装通用组件src/components/city/index.vue

<script lang="ts" setup name="City"></script>
<template>
  <div class="city">
    <div class="select">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option">
      <span class="ellipsis" v-for="i in 24" :key="i">北京市</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>

全局注册

import XtxCity from '@/components/city/index.vue'
export default {
  install(app: App) {
    app.component('City', City)
  },
}

提供类型 src/global.d.ts

import XtxCity from '@/components/city/index.vue'
declare module 'vue' {
    City: typeof City
  }
}

（2）在商品详情组件中渲染city组件 src/views/goods/components/goods-name.vue

<dl>
  <dt>配送</dt>
  <dd>至 <City></City></dd>
</dl>

（3）控制城市的显示和隐藏

  1. 点击的时候切换省市区的样式
  2. 切换城市弹层的显示或隐藏
<script lang="ts" setup name="City">
+ import { ref } from 'vue'
+const active = ref(false)
+const toggle = () => {
+  active.value = !active.value
+}
</script>


<template>
  <div class="city">
+    <div class="select" @click="toggle" :class="{ active: active }">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
+    <div class="option" v-show="active">
      <span class="ellipsis" v-for="i in 24" :key="i">北京市</span>
    </div>
  </div>
</template>

（4）点击弹层外部，关闭弹层

<script lang="ts" setup>
import { ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
const active = ref(false)
const toggle = () => {
  active.value = !active.value
}
// 点击外面，关闭弹窗
const target = ref(null)
onClickOutside(target, () => {
// 参数1：监听哪个元素,target是通过ref绑定给我们监听盒子的
// 参数2：点击了该元素外其他地方触发的函数
  active.value = false
})
</script>
<template>
  <div class="city" ref="target">
    <div class="select" @click="toggle" :class="{ active: active }">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="active">
      <span class="ellipsis" v-for="i in 24" :key="i">北京市</span>
    </div>
  </div>
</template>

城市选择-动态渲染

需求：完成城市数据的获取以及渲染

注意

城市数据并不是直接从接口服务器中获取的，而是从阿里云服务器上获取的数据，所以不能使用封装好的request发送请求，直接使用 原生的axios 发送请求即可。https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.jsonopen in new window

（1）定义数据类型

// 城市列表类型
export type AreaList = {
  code: string
  level: number
  name: string
  areaList: AreaList[]
}

（2）获取数据src/components/city/index.vue

需求: 从接口获取城市数据，赋值给本地数据

  1. 定义列表数据变量 const cityList = ref<AreaList[]>([])
  2. 封装调接口的方法
  3. 方法内部调用接口，把获取到的结果赋值给cityList
  4. 调用方法
<script lang="ts" setup name="City">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import type { AreaList } from '@/types/goods'
import axios from 'axios'
// 控制弹层的显示隐藏
const active = ref(false)
const toggle = () => {
  active.value = !active.value
}
const target = ref(null)
onClickOutside(target, (e) => {
  // console.log(e)
  // 当点击target元素的外面的时候，就会触发
  active.value = false
})

const cityList = ref<AreaList[]>([])
const getCityList = async () => {
  const res = await axios.get<AreaList[]>(
    'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
  )
  cityList.value = res.data
}
getCityList()
</script>

（3）渲染数据src/components/City/index.vue

<template>
  <div class="city" ref="target">
    <div class="select" :class="{ active: active }" @click="toggle">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-show="active">
      <span class="ellipsis" v-for="item in cityList" :key="item.code">
        {{ item.name }}
      </span>
    </div>
  </div>
</template>

（4）点击弹层外部，关闭弹层

<script lang="ts" setup>
import { ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
const active = ref(false)
const toggle = () => {
  active.value = !active.value
}
// 点击外面，关闭弹窗
const target = ref(null)
onClickOutside(target, () => {
// 参数1：监听哪个元素,target是通过ref绑定给我们监听盒子的
// 参数2：点击了该元素外其他地方触发的函数
  active.value = false
})
</script>
<template>
  <div class="city" ref="target">
    <div class="select" @click="toggle" :class="{ active: active }">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="active">
      <span class="ellipsis" v-for="i in 24" :key="i">北京市</span>
    </div>
  </div>
</template>

城市选择-交互逻辑

在这里插入图片描述

需求：

  1. 点击选择省市区的时候能够把省市区数据存储起来
    1. 根据点击的每一个节点的level决定他应该存储到省/城/区的哪个下面
    2. 点击的时候，需要把当前弹层城市信息替换为当前点击节点的子节点的城市信息（点击省显示市，点击市显示县）
    3. 如果点击的是区的节点，则需要关弹层
    4. 如果中途点击了关闭弹层，则需要重置城市数据

点击某个省，显示省下面的市。点击市，显示市下面的县。

根据level判断级别。

（1）给城市注册点击事件

<div class="option" v-if="active">
  <span
    class="ellipsis"
    v-for="item in cityList"
    :key="item.code"
+    @click="selectCity(item)"
  >
    {{ item.name }}
  </span>
</div>

（2）城市切换逻辑

// 选择城市
const changeResult = ref({
  provinceCode: '',
  provinceName: '',
  cityCode: '',
  cityName: '',
  countyCode: '',
  countyName: ''
})

const selectCity = (city: AreaList) => {
  if (city.level === 0) {
    // 省
    changeResult.value.provinceName = city.name
    changeResult.value.provinceCode = city.code
    cityList.value = city.areaList
  }
  if (city.level === 1) {
    // 市
    changeResult.value.cityName = city.name
    changeResult.value.cityCode = city.code
    cityList.value = city.areaList
  }
  if (city.level === 2) {
    // 县（区）
    changeResult.value.countyName = city.name
    changeResult.value.countyCode = city.code
    // 关闭弹窗
    active.value = false
  }
}

（3）关闭时恢复城市数据

const cityList = ref<AreaList[]>([])
const cacheList = ref<AreaList[]>([])

const getCityData = async () => {
  const {data:res} = await axios.get<AreaListObj[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
  cityList.value = res
  cacheList.value = res
}
getCityData()

// 监听关闭弹窗的处理，恢复数据
watch(active, (value) => {
  // 当关闭active的时候，需要回复数据
  if (!value) {
    cityList.value = cacheList.value
  }
})

城市选择-完整地址处理

需求描述

  1. 默认展示的配送地址需要从父组件传递过来(登录的用户可以拿到当前用户的默认配送地址)
  2. 子组件选择完省市区需要传递给父组件，由父组件组织数据传给子组件进行展示（默认展示配送地址的数据源在父组件）

注意：完整地址需要父组件传递给子组件，将来如果登录的用户，父组件可以获取到完整的地址。

（1）父组件将城市数据传递给子组件

<script lang="ts" setup>
const userAddress = ref('江西省 九江市 不知道县')
</script>

 <City :userAddress="userAddress"></City></dd>

（2）子组件接收，并且进行展示

注意点:具体的地址和请选择配送同时只展示一个

defineProps<{
  userAddress?: string
}>()

<div class="select" @click="toggle" :class="{ active }">
  <span class="value" v-if="userAddress">{{ userAddress }}</span>
  <span class="placeholder" v-else>请选择配送地址</span>
  <i class="iconfont icon-angle-down"></i>
</div>

（3）子组件选择完城市，需要将数据传递给父组件

// 选择的城市结果类型
export type CityResult = {
  provinceCode: string
  provinceName: string
  cityCode: string
  cityName: string
  countyCode: string
  countyName: string
}

const changeResult = ref<Partial<CityResult>>({})


const emit = defineEmits<{
  (e: 'changeCity', value: CityResult): void
}>()


const selectCity = (city: AreaList) => {
  if (city.level === 0) {
    // 省
    changeResult.value.provinceName = city.name
    changeResult.value.provinceCode = city.code
    cityList.value = city.areaList
  }
  if (city.level === 1) {
    // 市
    changeResult.value.cityName = city.name
    changeResult.value.cityCode = city.code
    cityList.value = city.areaList
  }
  if (city.level === 2) {
    // 县（区）
    changeResult.value.countyName = city.name
    changeResult.value.countyCode = city.code
    // 关闭弹窗
    active.value = false
    // 子传父
    emit('changeCity', changeResult.value)
  }
}

优化代码（可选）

const changeResult = ref<Partial<CityResult>>({})
// record接受两个泛型参数，第一个为对象key的类型，第二个为对象值的类型
const cityMap: Record<number, 'province' | 'city' | 'county'> = {
  0: 'province',
  1: 'city',
  2: 'county'
}
const selectedCity = (city: AreaList) => {
  changeResult.value[`${cityMap[city["level"]]}Name`] = city.name
  changeResult.value[`${cityMap[city["level"]]}Code`] = city.code
  if (city.level === 2) {
    setIsShowCity(false)
    emits('changeCity', changeResult.value)
  } else {
    cityList.value = city.areaList
  }
}

（4）父组件接受数据并且处理

<dl>
  <dt>配送</dt>
  <dd>
    至
    <XtxCity
      @changeCity="changeCity"
      :fullPath="fullPath"
    ></XtxCity>
  </dd>
</dl>

const userAddress = ref('江西省 九江市 不知道县')
const changeCity = (changeResult: CityResult) => {
  userAddress.value =
    changeResult.provinceName +
    ' ' +
    changeResult.cityName +
    ' ' +
    changeResult.countyName
}
', changeResult.value)
  } else {
    cityList.value = city.areaList
  }
}

（4）父组件接受数据并且处理

<dl>
  <dt>配送</dt>
  <dd>
    至
    <XtxCity
      @changeCity="changeCity"
      :fullPath="fullPath"
    ></XtxCity>
  </dd>
</dl>

const userAddress = ref('江西省 九江市 不知道县')
const changeCity = (changeResult: CityResult) => {
  userAddress.value =
    changeResult.provinceName +
    ' ' +
    changeResult.cityName +
    ' ' +
    changeResult.countyName
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/378205.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【PyTorch】教程：torch.nn.Conv2d

【PyTorch】教程：torch.nn.Conv2d

Conv2d CLASS torch.nn.Conv2d(in_channels, out_channels, kernel_size, stride1, padding0, dilation1, groups1, biasTrue, padding_modezeros, deviceNone, dtypeNone) 2D 卷积 out(Ni,Coutj)bias(Coutj)∑k0Cin−1Weight(Coutj,k)∗input(Ni,k)out(N_i, C_{out_j})bias(C_…
阅读更多...
k8s环境jenkins发布vue项目指定nodejs版本

k8s环境jenkins发布vue项目指定nodejs版本

k8s环境jenkins发布vue项目指定nodejs版本1、背景2、分析3、解决方法3.1、 找到配置镜像位置3.2、 制作新镜像3.3、 推送镜像到私有仓库3.4、 修改配置文件1、背景 发布一个前端项目&#xff0c;它需要nodejs 16.9.0版本支持&#xff0c;而kubesphere 3.2.0集成的jenkins 的镜…
阅读更多...
Hbase2.4.11简单了解_搭建Hbase集群_配置Hbase高可用---大数据之Hbase工作笔记0034

Hbase2.4.11简单了解_搭建Hbase集群_配置Hbase高可用---大数据之Hbase工作笔记0034

然后我们看一下hbase的集群架构,可以看到跟其他Hadoop系列的架构一样 都是有个master对吧,然后 还有3个region server,然后所有的机器,都连接到zookeeper 然后这里还要注意有个:backup-master103 ,这个是个备用的master 看看master 和 regionserver的作用. master部署到namen…
阅读更多...
深度学习之神经网络的优化器篇

深度学习之神经网络的优化器篇

神经网络的优化器 文章目录神经网络的优化器GD 梯度下降算法重球法SGD随机梯度下降Momentum动量梯度NAG(Nesterov accelerated gradient)AdaGrad(Adaptive gradient)RMSProp(Root mean square prop)Adam(Adaptive Moment Estimation)AdamWAdan(Adaptive Nesterov Momentum)本片…
阅读更多...
cesium学习记录03-QGis数据生产=＞Postgis存储=＞Geoserver发布=＞Cesium调用

cesium学习记录03-QGis数据生产=＞Postgis存储=＞Geoserver发布=＞Cesium调用

说明&#xff1a; 参照文章 1&#xff0c;安装 QGIS 下载安装 &#xff08;前四步就可以了&#xff09; 2&#xff0c;下载安装postgresql 3&#xff0c;下载安装PostGis 4&#xff0c;QGIS连接PostGis 5&#xff0c;QGIS 上传到Postgis 1&#xff0c;QGIS图的图 &…
阅读更多...
坚鹏：学习贯彻二十大精神 解码共同富裕之道（面向银行）

坚鹏：学习贯彻二十大精神 解码共同富裕之道（面向银行）

学习贯彻二十大精神 解码共同富裕之道课程背景&#xff1a; 很多银行从业人员存在以下问题&#xff1a; 不知道如何准确解读二十大精神&#xff1f; 不清楚共同富裕相关政策要求&#xff1f; 不知道如何有效推动共同富裕&#xff1f; 课程特色&#xff1a; 有实战案例 有…
阅读更多...
【C++】STL 模拟实现之 list

【C++】STL 模拟实现之 list

文章目录一、list 的常用接口及其使用1、list 一般接口2、list 特殊接口3、list 排序的性能分析二、list 迭代器的实现1、迭代器的分类2、list 迭代器失效问题3、list 迭代器源码分析4、list 迭代器模拟实现4.1 普通迭代器4.2 const 迭代器4.3 完整版迭代器三、list 的模拟实现…
阅读更多...
05 封装

05 封装

在对 context 的封装中&#xff0c;我们只是将 request、response 结构直接放入 context 结构体中&#xff0c;对应的方法并没有很好的封装。 函数封装并不是一件很简单、很随意的事情。相反&#xff0c;如何封装出易用、可读性高的函数是非常需要精心考量的&#xff0c;框架中…
阅读更多...
Pwn 二进制漏洞审计

Pwn 二进制漏洞审计

PWN的另一个名字是二进制漏洞审计 Pwn和逆向工程一样&#xff0c;是操作底层二进制的&#xff0c;web则是在php层面进行渗透测试 我是从re开始接触CTF的&#xff0c;有一点二进制基础&#xff0c;本文可能会忽略一些基础知识的补充 ”Pwn”是一个黑客语法的俚语词 &#xff0c;…
阅读更多...
JS#1 引入方式和基础语法

JS#1 引入方式和基础语法

JavaScript(JS)是一门跨平台, 面向对象的脚本语言, 来控制网页行为的, 它能够是网页可交互一. 引入方式内部脚本与外部脚本内部脚本: 将JS代码定义在HTML页面中外部脚本: 将JS代码定义在外部JS文件中, 然后引入到HTML页面中注意: 在HTML中,JS代码必须位于<script></sc…
阅读更多...
纯手动搭建大数据集群架构_记录008_搭建Hbase集群_配置集群高可用---大数据之Hadoop3.x工作笔记0169

纯手动搭建大数据集群架构_记录008_搭建Hbase集群_配置集群高可用---大数据之Hadoop3.x工作笔记0169

首先准备安装包 然后将安装包分发到集群的其他机器上去 然后因为运行hbase需要zookeeper支持,所以这里首先要去,启动zk 走到/opt/module/hadoop-3.1.3/bin/zk.sh 然后 zk.sh start 启动一下,可以看到启动了已经 然后zk.sh status 可以看zookeeper的状态 然后我们再去启动一下…
阅读更多...
购买运动耳机应该考虑什么问题、运动达人必备的爆款运动耳机

购买运动耳机应该考虑什么问题、运动达人必备的爆款运动耳机

喜欢运动的小伙伴都知道&#xff0c;运动和音乐是最配的&#xff0c;在运动中伴随着节奏感的音乐能够让自己更兴奋&#xff0c;锻炼的更加起劲儿。在运动耳机方面我也一直都有所研究&#xff0c;购买运动耳机最重要的就是要满足我们运动时候听音乐的需求&#xff0c;从佩戴舒适…
阅读更多...
SAP Insurance Analyzer

SAP Insurance Analyzer

SAP Insurance Analyzer 是一款用于保险公司财务和风险管理的软件。SAP Insurance analyzer 支持基于 IFRS 17 或 Solvency II 的保险合同估值和计算要求。SAP Insurance Analyzer 于 2013 年 5 月推出&#xff0c;为源数据和结果数据集成了一个预配置的保险数据模型。 源数据…
阅读更多...
网上商城系统用户子功能模块

网上商城系统用户子功能模块

技术&#xff1a;Java、JSP等摘要&#xff1a;网上购物系统又称为网上商城、网络商城、网上商城、网上开店平台、网店管理系统、网店程序、网上购物系统、网上商城系统等。无论是开设个人网上购物商店还是企业网上商城商城&#xff0c;一套好用的网上购物系统都是必须的。网上购…
阅读更多...
颠覆你的认知，这3款软件，每一款都非常实用

颠覆你的认知，这3款软件，每一款都非常实用

闲话少说&#xff0c;直上干货。 1、WizTree WizTree是一款最快的磁盘空间分析器&#xff0c;傻瓜式操作&#xff0c;功能还特别强大。它可快速的从硬盘中查找和释放被大量占用的空它将扫描的硬盘驱动器&#xff0c;直观显示哪些文件和文件夹使用的磁盘空间最多&#xff0c;及时…
阅读更多...
day22_IO

day22_IO

今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、缓冲流 三、字符流 四、缓冲字符流 五、匿名内部类 零、 复习昨日 File: 通过路径代表一个文件或目录 方法: 创建型,查找类,判断类,其他 IO …
阅读更多...
EPICS synApps介绍

EPICS synApps介绍

一、synApps是什么&#xff1f; 1&#xff09; 一个用于同步束线用户的EPICS模块集合。 2&#xff09; EPICS模块 alive, autosave, busy, calc, camac, caputRecorder, dac128V, delaygen, dxp, ip, ip330, ipUnidig, love, mca, measComp, modbus, motor, optics, quadEM,…
阅读更多...
如何提升权限运行远程桌面客户端？

如何提升权限运行远程桌面客户端？

​ 我们远程支持他人的时候&#xff0c;有些情况下需要管理员权限才能执行操作&#xff0c;比如更新软件。那么如何提升权限运行远程桌面客户端&#xff1f; 如果您使用 Splashtop SOS 软件远程支持客户&#xff0c;可以使用连线提权功能提升至系统管理员权限&#xff0c;方便…
阅读更多...
java 1（概要、变量与运算符）

java 1（概要、变量与运算符）

java ——概要、变量与运算符 ✍作者&#xff1a;电子科大不知名程序员 &#x1f332;专栏&#xff1a;java学习指导 各位读者如果觉得博主写的不错&#xff0c;请诸位多多支持&#xff1b;如果有错误的地方&#xff0c;欢迎在评论区指出 目录java ——概要、变量与运算符命令行…
阅读更多...
Linux | 压缩和解压文件详细

Linux | 压缩和解压文件详细

linux系统中针对不同的文件&#xff0c;有不同的压缩命令。本文对常见压缩和解压命令进行总结zip文件1.1.unzip解压单个文件unzip 命令可以查看和解压缩 zip 文件。该命令的基本格式如下&#xff1a;unzip filename.zip (文件后可添加压缩相关参数)-d 目录名 将压缩文件解压到指…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023