vue-cli项目中使用Mint-ui中的mt-cell、mt-popup、mt-picker实现仿淘宝添加收货地址页面（地址三级联动 && 附全国省市区json文档）

最新推荐文章于 2024-05-23 20:55:07 发布

Ivymemphis

最新推荐文章于 2024-05-23 20:55:07 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue-cli3 vue mint 组件化

本文链接：https://blog.youkuaiyun.com/weixin_44410783/article/details/116188585

版权

本文介绍了如何在基于vue-cli3的项目中利用Mint-UI的mt-cell、mt-popup和mt-picker组件，结合全国省市区json数据，创建一个具有地址三级联动功能的添加收货地址页面。详细讲述了所需组件及其实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习Mint-ui，想实现仿淘宝的添加收获地址的功能。在网上寻找类似样例，发现无非是仅有一个地址的三级联动效果，未结合弹出框mt-popup，且大多数没有详细的注释。自己实现后来分享一下~

1. 淘宝的添加收获地址页面

在这里插入图片描述

我们想要实现的效果是在点击选择地区的时候，从底部显示弹出框，弹出框中可以实现地址的三级联动

2. 需要哪些组件

Cell组件：实现单元格，其语法结构为：

<mt-cell title="标题" label="备注信息" :value="内容" isLink to="URL地址"></mt-cell>

isLink属性用于控制单元格是否为可点击的链接，布尔类型，默认为true

Popup组件：实现弹出框，其语法结构为：

<mt-popup v-model="变量名称" position="弹出框位置" ></mt-popup>

v-model所绑定的变量用于控制是否显示弹出框，布尔类型
position属性用于控制弹出层的位置（top | right | bottom | left）

Picker组件：用于实现选择器，其语法结构为：

<mt-picker :slots='slots' @change='handler'></mt-picker>

slots:[
        {
   
          values:[]
        },
        {
   
          divider: 是否显示分隔符
          content: 分隔符显示的文本
        },
        {
   
          values:[]
        }
        ...
]

1. slots：绑定到 slots 属性的数组由对象组成
2. change事件：传入 slots，当被选中的值发生变化时触发 change 事件。
   change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组
3. 在 change 事件中，可以使用注册到 picker 实例上的一些方法，但在我们要实现的页面功能中只会用到如下方法：
  * setSlotValues(index, values)：设定给定 slot 的备选值数组 *

3. 代码实现

下列代码中引入的pca.json文件为全国省市区的json文档
记得引入mint-ui~

<template>
  <div>
    <mt-header title="添加收货地址">

最低0.47元/天解锁文章