前端Vue自定义地址展示地址选择地址管理组件

news2024/11/18 1:27:01

前端Vue自定义地址展示地址选择地址管理组件, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13181

效果图如下:

# cc-addressBox

#### 使用方法

```使用方法

<!-- addressItem:地址条目数据 @click:地址点击设置事件 -->

<cc-addressBox :addressItem="item" @click="goSetAddress"></cc-addressBox>

```

#### HTML代码实现部分

```html

<template>

<view class="page">

<view class="addressBox">

<!-- addressItem:地址条目数据 @click:地址点击设置事件 -->

<cc-addressBox :addressItem="item" @click="goSetAddress"></cc-addressBox>

</view>

<view class="addressBox">

<cc-addressBox :addressItem="itemTwo" @click="goSetAddress"></cc-addressBox>

</view>

</view>

</template>

<script>

export default {

data() {

return {

item:{'user':'收货人:小明  18000000000' ,'address':'广州市天河区员村街道'},

itemTwo:{'user':'收货人:小张  19000000000' ,'address':'广州市天河区猎德街道'},

};

},

methods: {

goSetAddress(item){

console.log('地址选择携带数据 = ' + JSON.stringify(item))

uni.showModal({

title:'地址选择',

content:'地址选择携带数据 = ' + JSON.stringify(item)

})

}

}

}

</script>

<style scoped lang="scss">

page {

padding-bottom: 70px;

}

.addressBox {

margin-top: 20rpx

}

</style>

```

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

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

相关文章

阿里云 搭建网站步骤

目录 1. 登录阿里云网站2. 购买服务器3. 获取服务器实例4.开放服务器端口(重点)5.传输项目到服务器(重点)6.更新apt工具和安装nginx(重点)7.配置nginx以及启动(重点) 1. 登录阿里云网站 阿里云网站 2. 购买服务器 3. 获取服务器实例 4.开放服务器端口(重点) 因为阿里云默认会…

java版 工程管理系统源码之Spring Cloud 工程项目各模块及其功能点清单

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润 在工程行业中&#xff0c;管理不畅以及不良的项目执行&#xff0c;往往会导致项目延期、成本上升、回款拖后&#xff0c;最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统&#xff0c;确保…

【每日一题】1401. 圆和矩形是否有重叠

【每日一题】1401. 圆和矩形是否有重叠 1401. 圆和矩形是否有重叠题目描述解题思路 1401. 圆和矩形是否有重叠 题目描述 给你一个以 (radius, xCenter, yCenter) 表示的圆和一个与坐标轴平行的矩形 (x1, y1, x2, y2) &#xff0c;其中 (x1, y1) 是矩形左下角的坐标&#xff0…

【MySQL】使用LOAD DATA INFILE命令加载数据文件到MySQL数据库的方法和常见错误及解决方法

文章目录 【MySQL】使用LOAD DATA INFILE命令加载数据文件到MySQL数据库的方法和常见错误及解决方法LOAD DATA INFILE的语法详细1.创建&#xff08;选择&#xff09;目标数据库和表2.将数据从 CSV 文件导入已创建的表常见错误和解决方法错误1&#xff1a;ERROR 1290 (HY000): T…

人工智能 ---搜索算法

&#xff08;一&#xff09;Dijkstra-Prim 算法和 Kruskal 算法 Dijkstra-Prim算法基本思路&#xff1a;所有节点分成两个group&#xff0c;一个为已经选取的selected_node&#xff08;为list类型&#xff09;&#xff0c;一个为candidate_node&#xff0c;首先任取一个节点加入…

以太网通信的回环测试

PHY 芯片通常带有回环&#xff08;Loopback&#xff09;功能&#xff0c;用于 PHY 通信链路的测试。本文主要讨论三种常用 PHY 芯片的回环功能&#xff0c;并使用 Broadcom 的 B50612D 芯片进行 PHY 回环测试。 1 常见PHY芯片的回环功能 1.1 KSZ9031 KSZ9031 芯片支持以下两种…

坚鹏:中国农业银行BLM银行数字化转型战略培训在北京大学举办

中国农业银行BLM银行数字化转型战略培训班在北京大学顺利举办 中国农业银行成立于1951年&#xff0c;国家副部级单位。中国农业银行是中国金融体系的重要组成部分&#xff0c;提供各种公司银行、零售银行产品和服务&#xff0c;同时开展金融市场业务及资产管理业务&#xff0c…

Python中常见的10个高级特性解析

目录 1. 什么是Python中的装饰器&#xff1f;如何使用装饰器&#xff1f;2. 什么是Python中的迭代器和生成器&#xff1f;它们有什么区别&#xff1f;3. Python中的GIL是什么&#xff1f;它如何影响多线程应用程序&#xff1f;4. 什么是Python中的元类&#xff1f;如何使用元类…

小鱼C python - 集合的练习(去重、解密)

题一&#xff1a;用字典实现集合的去重特性 1. 生成100个1&#xff5e;100的随机值 思路&#xff1a; 1. range 范围 2. random.randint(a,b) import random x [] for I in range(100):x.append(random.randint(1,100)) print(x) 2. x和y的交集 思路&#xff1a;1.遍历x,…

Java经典面试题包含答案

文章目录 1.Java语言有哪些特点?2.面向对象和面向过程的区别&#xff1f;3.八种数据类型大小、封装类4.instanceof关键字的作用5.Java自动装箱与拆箱6. 重载与重写的区别7. 与 equals的区别8.hashCode的作用9. JVM vs JDK vs JRE10.什么是字节码&#xff1f;采用字节码的好处…

【MySql】RR 与 RC的本质区别

文章目录 当前读与快照读两个场景RR 与 RC的本质区别 本篇博客介绍的是RR与RC的本质区别&#xff0c;话不读说&#xff0c;直接进入主题即可。 当前读与快照读 select * from user lock in share mode ,以加共享锁方式进行读取&#xff0c;对应的就是当前读 不加lock in share…

【EXCEL】快速填充数据,批量提取与组合数据

目录 0.环境 1.简要介绍功能 2.具体实际应用 1&#xff09;提取括号中的内容 2&#xff09;拆分重组--重组“姓”和“职位” 3&#xff09;数据拆分 0.环境 windows office2021 注意&#xff1a;此功能可能需excel 2013版本及以上使用 1.简要介绍功能 在excel中&#xf…

flink datastream api实现数据实时写入hudi

Apache Hudi&#xff08;发音为“hoodie”&#xff09;是下一代流数据湖平台。 Apache Hudi 将核心仓库和数据库功能直接引入数据湖。 Hudi 提供表、事务、高效的更新插入/删除、高级索引、流式摄取服务、数据集群/压缩优化和并发性&#xff0c;同时将您的数据保持为开源文件格…

项目经理一直盲目跟风的PMP认证,到底还剩多少含金量?

早上好&#xff0c;我是老原。 到底有没有必要考证&#xff1f; 到底考啥证&#xff1f; PMP&#xff1f;软考&#xff1f;还是NPDP&#xff1f; …… 这是老原的粉丝们亘古不变的话题。 我这有不少朋友就是这样&#xff0c;前两年就在问我要不要考证&#xff0c;直到现在…

为什么你的手机号需要二次实名,这几个原因你想过没有?

尊敬的客户&#xff1a;您的手机卡存在安全风险&#xff0c;为保护您的权益&#xff0c;您的电话呼出、短信和流量使用功能被限制。请机主本人使用被保护的手机号码登录网页链接 进行实名核验&#xff0c;核验通过后&#xff0c;将自动恢复正常通信服务。如核验未通过&#xff…

vite构建工具初识

一、什么是vite vite官网地址&#xff1a;https://cn.vitejs.dev/ Vite 是一个由 Vue.js 作者尤雨溪开发的新一代前端构建工具&#xff0c;它相比于传统的 webpack&#xff0c;具有更快的启动速度、更高的开发效率和更简洁的配置方式。 Vite的主要特点包括&#xff1a; 快速…

2023年上海/广州/深圳DAMA-CDGA/CDGP数据治理认证班

DAMA认证为数据管理专业人士提供职业目标晋升规划&#xff0c;彰显了职业发展里程碑及发展阶梯定义&#xff0c;帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力&#xff0c;促进开展工作实践应用及实际问题解决&#xff0c;形成企业所需的新数字经济下的核心职业…

Java 设计模式实战系列—策略模式

从优惠打折活动说起 电商平台为了增加销量经常搞一些活动&#xff0c;比如 618、双十一&#xff0c;还有一些节假日活动&#xff0c;根据销量的变化又经常更新不同的活动。最开始为了增加销量&#xff0c;全场都六折&#xff1a; // 打六折 public BigDecimal sixDiscount(Bi…

Spring Cloud 之注册中心 Eureka 精讲

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

【单周期CPU】LoongArch | 立即数扩展模块Ext | 32位算术逻辑运算单元(ALU)

前言&#xff1a;本章内容主要是演示在vivado下利用Verilog语言进行单周期简易CPU的设计。一步一步自己实现模型机的设计。本章先介绍单周期简易CPU中基本组合逻辑部件的设计。 &#x1f4bb;环境&#xff1a;一台内存4GB以上&#xff0c;装有64位Windows操作系统和Vivado 201…