前端Vue自定義地址展示地址選擇地址管理組件的示例詳解

更新時(shí)間：2023年06月25日 09:59:46 作者：ccVue

這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前端Vue自定義地址展示地址選擇地址管理組件，下載完整代碼請(qǐng)?jiān)L問(wèn)uni-app插件市場(chǎng)地址：

https://ext.dcloud.net.cn/plugin?id=13181

效果圖如下：

cc-addressBox使用方法

<!-- addressItem：地址條目數(shù)據(jù) @click：地址點(diǎn)擊設(shè)置事件 -->
<cc-addressBox :addressItem="item" @click="goSetAddress"></cc-addressBox>

HTML代碼實(shí)現(xiàn)部分

<template>
<view class="page">
<view class="addressBox">
<!-- addressItem：地址條目數(shù)據(jù) @click：地址點(diǎn)擊設(shè)置事件 -->
<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':'廣州市天河區(qū)員村街道'},
itemTwo:{'user':'收貨人:小張  19000000000' ,'address':'廣州市天河區(qū)獵德街道'},
};
},
methods: {
goSetAddress(item){
console.log('地址選擇攜帶數(shù)據(jù) = ' + JSON.stringify(item))
uni.showModal({
title:'地址選擇',
content:'地址選擇攜帶數(shù)據(jù) = ' + JSON.stringify(item)
})
}
}
}
</script>
<style scoped lang="scss">
page {
padding-bottom: 70px;
}
.addressBox {
margin-top: 20rpx
}
</style>

到此這篇關(guān)于前端Vue自定義地址展示地址選擇地址管理組件的文章就介紹到這了,更多相關(guān)Vue自定義地址展示地址選擇地址管理組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
vue使用docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能全過(guò)程
文件在線預(yù)覽是目前移動(dòng)化辦公的一種新趨勢(shì),下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)增刪改查的示例代碼
其實(shí)很多公司都會(huì)有類似于用戶權(quán)限樹(shù)的增刪改查功能，本文主要介紹了vue實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue單頁(yè)應(yīng)用中如何使用jquery的方法示例
最近在工作中遇到的一個(gè)需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過(guò)查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁(yè)應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-07-07
解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報(bào)錯(cuò)ValidationError: Progress Plugin Invalid Options問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue的axios請(qǐng)求改變content-type為form-data問(wèn)題
這篇文章主要介紹了vue的axios請(qǐng)求改變content-type為form-data問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue的axios取消請(qǐng)求實(shí)現(xiàn)過(guò)程
文章介紹了如何使用axios的cancelToken功能取消請(qǐng)求,包括兩種創(chuàng)建cancelToken的方法：使用CancelToken.source工廠方法和通過(guò)傳遞executor函數(shù)創(chuàng)建,還提到了如何處理取消請(qǐng)求的原因,并給出了解決頻繁點(diǎn)擊發(fā)送請(qǐng)求問(wèn)題的建議
2025-12-12
Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-12-12
Vue利用localStorage本地緩存使頁(yè)面刷新驗(yàn)證碼不清零功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue利用localStorage本地緩存使頁(yè)面刷新驗(yàn)證碼不清零功能的實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-09-09