vue3——自己封装城市联动组件

最新推荐文章于 2024-08-12 09:15:45 发布

最新推荐文章于 2024-08-12 09:15:45 发布

阅读量433

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57712926/article/details/120388651

版权

本文介绍如何在 Vue3 中封装一个城市联动组件，利用 axios 获取数据，并使用 vueuse/core 判断点击事件。详细步骤包括组件封装和使用，以及最终效果的演示。

摘要由CSDN通过智能技术生成

前言

本文将带你实现地址的选择，将其注册为全局组件，进行三级联动后选定地址。一起来看看吧~

一、准备

1. axios

利用axios发送请求，拿到全部城市数据

在项目根目录下打开任意终端，执行npm i axios命令
项目中需要发送请求的代码统一放置在src/api目录下，这个目录下新建index.js文件

import axios from 'axios'
// 获取城市数据
// 1. 数据在哪里？https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json
// 2. 何时获取？打开城市列表的时候，做个内存中缓存
// 3. 怎么使用数据？定义计算属性，根据点击的省份城市展示
export const getCityList = async () => {
   
  // 添加缓存，防止频繁加载列表数据
  if (window.cityList) {
   
    // 缓存中已经存在数据了
    return window.cityList
  }
  const ret = await axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
  // 给window对象添加了一个属性cityList
  if (ret.data) {
   
    window.cityList = ret.data
  }
  // 把数据返回
  return ret.data
}

2. vueuse/core

利用vueuse/core里的onClickOutside，判断是否点击的是组件外部，来帮助我们关闭弹层

终端中执行npm install @vueuse/core@5.3.0,这里安装指定版本的，各位按需选择

二、代码实现

1. 封装

将其封装为全局组件，还是像之前的文章一样，文件放在src/components目录下，新建city.vue文件

代码如下（示例）：

<template>
  <div class="city" ref="target">
    <div class="select" @click="toggle" :class="{active:isShow}">
      <span v-if='!fullLocation' class="placeholder">请选择配送地址</span>
      <span v-else class="value">{
   {
   fullLocation}}</span>
      <i class="iconfont icon-angle-down">