Vue

在我们使用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);
        }
    });
}

 

 

暂时记录下。。。