首页 > 其他分享 >前端Vue自定义地址展示地址选择地址管理组件

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

时间:2023-06-25 10:00:40浏览次数:46  
标签:Vue 自定义 选择 item 地址 组件

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

效果图如下:

cc-addressBox

使用方法


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

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

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>

标签:Vue,自定义,选择,item,地址,组件
From: https://www.cnblogs.com/ccVue/p/17502209.html

相关文章

  • 基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案
    前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起,页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。如上图:支持h5+小程序+App端markdown解析渲染。上面则是演示了在App端+小程序端键盘弹......
  • 上位机DM地址使用EXCEL中Left和Right涵数快速配置
    32位地址配置。首先在P2确定采集开始地址Excel带标记(字母/字符)下拉为奇(偶)数递增输入函数,下拉即可 ......
  • IP地址、子网掩码和地址分类
    http://blog.csdn.net/bluishglc/article/details/47909593?utm_source=tuicool&utm_medium=referral 实际工作中用到网络知识的机会并不多,虽然以前学习过,但是许久不用自然也就生疏了。最近拿到几台云上的虚拟机,需要为它们建立一个VPC(虚拟私有云,就是一个虚拟的局域网),得益于......
  • 计算机网络知识——IP地址和子网掩码
    一、IP地址                IP地址由网络号和主机号组成。每台连在Internet网上的主机有唯一的IP地址。IP地址采用二进制形式,通常以"点分十进制表示法"表示(8个比特为一段,用十进制整数)。IP地址分为A、B、C、D、E五类,下图所示:(本文介绍的都是版本4......
  • 【计算机网络】IP地址和子网掩码的关系
     目录一、IP地址(1)IP地址分类(2)IP地址构成二、子网掩码三、广播地址四、子网容量相关(1)子网数(2)最大主机数(2)可用主机数总结一、IP地址了解IP地址扮演的角色有助于明白IP地址的含义乃至IP地址和子网掩码的关系IP(InternetProtocol—网际互连协议),是TCP/IP体系中的网络层......
  • linux系统查询服务器ip地址的命令
    linux系统查询服务器ip地址的命令参考文章3种方法来在Linux系统中查看服务器IP地址在Linux系统中,可以使用以下命令来查询服务器的IP地址:ifconfig命令:在终端输入ifconfig命令,它会显示当前系统中所有网络接口的配置信息,包括服务器的IP地址。ip命令:在终端输入ipaddr命令,它会列......
  • 基于springboot+vue的漫画之家管理系统,附源码+数据库+论文+PPT,适合课程设计、毕业设计
    1、项目介绍随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,“漫画之家”系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计......
  • 创建自定义的Spring Boot Starter
    1.概述Springboot的开发人员给那些流行的开源项目提供了很多Starter,但是我们并不局限于这些。我们可以创建自己的Starter,如果我们有一个公司内部使用的代码库,如果我们实在Springboot项目中使用,那给这个代码库创建一个SpringbootStarter是一个很好的实践。这些自定义的Sta......
  • SpringBoot中的yml文件中读取自定义配置信息
    SpringBoot中的yml文件中读取自定义配置信息开发中遇到的问题,百度的答案我都没有找到,去找大佬获取到的经验总结,这只是其中的一种方法,如果其他大佬有新的方法,可以分享分享。一、非静态属性1.1yml文件自定义配置信息,通过我们编写的代码读取。image:path:E:\image#存......
  • Vue(七)事件处理
    一、基本的事件处理<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>基本的事件</title><scripttype="text/javascript"src="../js/vue.js"></script>......