在我們使用vue的開發過程中總會遇到這樣的場景，封裝自己的業務組件。
封裝頁面組件前要考慮幾個問題：
1、該業務組件的使用場景
2、在什么條件下展示一些什么數據，數據類型是什么樣的，及長度顏色等
3、如果是通用的內容，比如ajax數據交互部分肯定是一個通用性的東西，怎么數據請求作到通用，返回的數據分配出去又不會出錯。
先看一個簡單的例子：
APP中常用的一個場景，點開我的信息右箭頭可做編輯，修改。
從下面的圖中可以看出來，修改頁面大同小異，完全可以用一個頁面，避免建多個頁面。
這邊采用的方式是，通過傳參判斷。
第一步：在data里面定義好一段數據格式，用來循環遍歷展示的。
第二步：給右箭頭綁定點擊事件，點擊的時候 傳入當前點擊的哪個的信息，也就是item。
第三步：通過路由等方式跳轉到下一個頁面，並把點擊信息通過參數的形式帶過去。
下面就是編輯頁面，也就是當前場景下小小的通用的業務組件的實現過程了。
從代碼中我的標記中不難看出，這里使用了3個formT ，為啥不是一個呢，因為雖說編輯修改頁面大同小異，但是頭像修改和文本信息修改的方式是存在一定去別的，
而電話、郵箱使用的是文本框就可以了，而個人簡介確實大段文字，要使用，富文本框的。
1、思路是這樣的，通過路徑傳過來的參數標識判斷，是點擊修改頭像過來的就展示修改頭像的內容，否則是修改個人簡介的則展示個人簡介的文本框，如果都不成立，就展示通用的結構。
2、首先第一步，結構上使用的 editflag 標識 寫在 computed 計算屬性里面，然后結構上使用該屬性，屬性里面的內容是返回的是 參數的標識，也就是 頭像，還是個人簡介還是其他的。
3、然后我們看editItem 是哪里來的，是事先定義好在data里面的屬性。
4、然后看這個屬性的賦值是哪里來的，發現使用了watch監聽了數據變化，當數據變化時賦值來的，
5、再看下 currpdata 哪里來的，發現是從 mixin模板里面來的，
看到這里也就是 watch 了一下pdata
3、然后就是 點擊完成的時候 調用 editUserInfo 方法 處理修改的內容邏輯了。
editUserInfo() {
if (this.editflag == 'headImageSrc') {
if (this.files && this.files.length > 0 && this.files[0].storageid) {
this.$set(this.formdata, "l_brokerimage", this.files[0].storageid);
} else {
// if (!this.API.hsVerify.verifyNumber(this.formdata.l_brokerimage, "頭像", null, "", 1)) {
// return false;
// }
if (!this.formdata['l_brokerimage'] || this.formdata['l_brokerimage'] == '') {
this.API.modal.toast({
message: "頭像不能為空或未重新上傳！",
duration: 3
});
return false;
}
}
} else if (this.editflag == 'brokername') {
if (!this.formdata['c_brokername'] && this.formdata['c_brokername'] == '') {
this.API.modal.toast({
message: "修改的名稱不能為空哦！",
duration: 3
});
return false;
}
} else if (this.editflag == 'mobile') {
if (this.formdata['c_mobile'] && this.formdata['c_mobile'] != '') {
var regMapMobile = /(^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$)/;
if (!regMapMobile.test(this.formdata['c_mobile'])) {
this.API.modal.toast({
message: "只能是1開始的11位純數字哦！",
duration: 3
});
return false;
}
} else {
this.API.modal.toast({
message: "修改的電話不能為空哦！",
duration: 3
});
return false;
}
} else if (this.editflag == 'email') {
if (this.formdata['c_email'] && this.formdata['c_email'] != '') {
var regMapEmail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9_]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(this.formdata['c_email'].length > 40){
this.API.modal.toast({
message: "郵箱超出最大長度！",
duration: 3
});
return false;
}
if (!regMapEmail.test(this.formdata['c_email'])) {
this.API.modal.toast({
message: "郵箱格式不正確！",
duration: 3
});
return false;
}
} else {
this.API.modal.toast({
message: "修改的郵箱不能為空哦！",
duration: 3
});
return false;
}
;
}
this.hsHttp.ajax({
data: {
"method": "exeCallBOWithRetNotWrapper",
"_uc": "UC_SYSTEM_TMPDATA_SAVE",
commdata: JSON.stringify(this.commdata),
formdata: JSON.stringify(this.formdata)
},
success: (data) => {
let json = JSON.parse(data);
if (json && json.success == "1") {
if (this.editflag == 'headImageSrc') {
if (this.files && this.files.length > 0 && this.files[0].storageid) {
this.user.headImageSrc = this.API.getServer() + this.files[0].filesrc;
}
} else {
this.user[this.editflag] = this.formdata[this.formproperty]
}
let chgJson = {};
chgJson[this.editflag] = this.user[this.editflag]
this.postMessage("user.change", chgJson);
this.API.hsBack();
} else {
this.API.modal.toast({
message: "修改失敗",
duration: 3
});
}
},
error: function (err) {
console.log(err);
}
});
}
暫時記錄下。。。