快捷導(dǎo)航

Vue.js 實(shí)現(xiàn)地址管理頁(yè)面思路詳解(地址添加、編輯、刪除和設(shè)置默認(rèn)地址)

更新時(shí)間：2019年12月11日 14:00:51 作者：你好像很好吃a

這篇文章主要介紹了Vue.js 實(shí)現(xiàn)地址管理頁(yè)面的思路(地址添加、編輯、刪除和設(shè)置默認(rèn)地址),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、前階段做了這個(gè)地址管理頁(yè)面，實(shí)現(xiàn)的過(guò)程中遇到了很多的問(wèn)題，好在最后實(shí)現(xiàn)了，在此記錄一下：

首先是加載頁(yè)面階段ajax從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，然后動(dòng)態(tài)的顯示在頁(yè)面中，隨后可以點(diǎn)擊單個(gè)的編輯或刪除進(jìn)行相關(guān)操作，可以單擊默認(rèn)地址按鈕進(jìn)行樣式切換，默認(rèn)地址可以沒(méi)有（單擊選中和取消），但是如果設(shè)置默認(rèn)地址則只能設(shè)置一個(gè)，好，下面我們來(lái)一步一步的實(shí)現(xiàn)。

2、我這里使用的是Vue.js，頁(yè)面加載階段很簡(jiǎn)單，直接在mounted聲明一個(gè)方法，然后在方法中調(diào)用ajax請(qǐng)求訪問(wèn)數(shù)據(jù)然后通過(guò)v-for循環(huán)將數(shù)據(jù)放入到html元素中即可，這個(gè)就不多說(shuō)了，直接看代碼就行了，這篇文章主要是記錄一下如何實(shí)現(xiàn)點(diǎn)擊選中和取消radio，并實(shí)現(xiàn)點(diǎn)擊過(guò)程中樣式的切換。

var vm = new Vue({
 el:"#",
 data:{
 sites:[]
 },
 mounted:function() {
 this.showData();
 },
 methods:{
 showData:function(){
 jQuery.ajax({
 url:"這里寫你的訪問(wèn)路徑",
 data:"",
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code==0){
 for(var i=0;i<res.data.addresses.length;i++){
 //將獲取到的數(shù)據(jù)賦值到data中的site[]
 vm.sites.push(res.data.addresses[i]);
 }
 }else{
 alert("加載失敗");
 }
 }
 })
 }
 }
})

3、首先實(shí)現(xiàn)radio的點(diǎn)擊選中和取消，可以看下我單獨(dú)整理的這篇文章：jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊全選/反選單選框/復(fù)選框文本框表單驗(yàn)證，由于我這里用到的是Vue.js，那么看下我頁(yè)面的實(shí)現(xiàn)代碼：

<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="true" v-if="site.isdefault=='1'" checked="checked" @click="editIsDefault(site, $event)"/>
<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="false" v-else @click="editIsDefault(site, $event)" />

將獲取到的addressid通過(guò)：id賦值到每個(gè)元素，實(shí)現(xiàn)每個(gè)元素對(duì)應(yīng)它自己的id，為元素添加data-* 屬性（點(diǎn)擊了解data-*屬性），方便獲取到checked的信息，然后為每個(gè)radio添加class方便我們?cè)O(shè)置點(diǎn)擊以后的圖片切換，根據(jù)v-if判斷該條地址信息是否為默認(rèn)地址，在元素上添加了點(diǎn)擊事件并傳入site（每條地址的相關(guān)信息），和該地址信息dom對(duì)象。

下面是修改默認(rèn)地址的方法：實(shí)現(xiàn)了點(diǎn)擊選中和取消，并且點(diǎn)擊切換后立即向服務(wù)器提交數(shù)據(jù)實(shí)現(xiàn)實(shí)時(shí)的數(shù)據(jù)更新。

editIsDefault:function(site,event){
 if($(event.currentTarget).data("waschecked")==true){
 $(event.currentTarget).prop("checked",false);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",false);
 }else{
 $(event.currentTarget).prop("checked",true);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",true);
 }
 var isDefault;
 if($(event.currentTarget).prop("checked")){
 isDefault = "1";
 }else{
 isDefault = "0";
 }
 jQuery.ajax({
 url:"這里寫你自己的url",
 data:{
 addressid: site.addressid,
 name: site.name,
 phone: site.phone,
 area: site.area,
 address: site.address,
 isdefault: isDefault 
 },
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code=="0"){
 }
 },
 error:function(){
 alert("修改默認(rèn)地址失敗,請(qǐng)刷新后重試");
 }
 })
}

4、使用CSS樣式來(lái)實(shí)現(xiàn)radio點(diǎn)擊選中和取消過(guò)程中圖片樣式的切換，我整理了另一篇文章，有興趣的可以看一下：點(diǎn)擊radio實(shí)現(xiàn)兩個(gè)圖片間的樣式切換

我這里直接將我的代碼貼一下供參考：

.address_manager_content-d3-left-img{
 /* 隱藏原有樣式 */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* 增加新樣式:未選中時(shí) */
 display: inline-block;
 width: 20px;
 height: 20px;
 position: static;
 margin : 15px 5px 0 0!important;
 background: url(未選中時(shí)圖片的url) no-repeat;
 background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* 選中時(shí) */
 background: url(選中時(shí)的圖片url) no-repeat;
 background-size: cover;
}

5、實(shí)現(xiàn)點(diǎn)擊以后編輯地址：（刪除的話思路一樣）

這個(gè)非常簡(jiǎn)單，因?yàn)槊恳粋€(gè)地址信息我們都是通過(guò)v-for循環(huán)得來(lái)的，那么我們點(diǎn)擊修改的時(shí)候?qū)⑽覀儷@取的數(shù)組中的site傳入到方法中即可，然后訪問(wèn)頁(yè)面的時(shí)候?qū)⒃摋l地址信息的id傳過(guò)去即可，到編輯地址頁(yè)面可以通過(guò)id去后臺(tái)查到該條地址信息并進(jìn)行地址回填就可以實(shí)現(xiàn)了。

<span @click="editAddress(site)">編輯</span>

editAddress:function(site){
 window.location.href="你的跳轉(zhuǎn)路徑（編輯地址信息的頁(yè)面）?addressid=" rel="external nofollow" +site.addressid;
}

總結(jié)

以上所述是小編給大家介紹的Vue.js 實(shí)現(xiàn)地址管理頁(yè)面(地址添加、編輯、刪除和設(shè)置默認(rèn)地址)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: