vue子组件的值改变后给出是否确认更改的提示，确认再改变输入框中的值(3)

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

type: String,

default: “”

},

serviceVal: {

type: [String, Number],

default: “”

},

serviceSwitch: {

// 是否开启服务访问

type: Boolean,

default: false

},

serviceWarning: {

// 提示消息

type: String,

default: “”

},

modify: {

// 修改页面才弹确认框

type: Boolean,

default: false

}

},

watch: {

serviceSwitch: {

handler(val) {

this.needCheck = val;

},

deep: true

}

},

created() {

this.val = this.serviceVal;

this.needCheck = this.serviceSwitch;

},

data() {

return {

error: true, //验证是否通过 默认验证通过

reg: /(^ +| +$)/gi, //校验为空

val: this.value, //输入的数据

is_err: this.isErr,

needCheck: false,

oldInputVal: “”

};

},

methods: {

//获取焦点事件

inputFocus() {

this.is_err = false;

this.oldInputVal = this.val;

},

//失去焦点事件

inputBlur() {

let isCheck = this.isCheck;

let val = “”;

if (this.val && typeof this.val == “string”) {

val = this.val.replace(this.reg, “”);

}

this.val = val;

if (isCheck) {

if (val == “”) {

this.is_err = true;

}

} else {

this.is_err = false;

}

let reg = /¹{1,}$/;

if (!reg.test(this.val)) {

this.$message.error({

message: “服务名只支持字母数字中划线~”,

duration: 3000

});

this.is_err = true;

} else {

if (this.needCheck && this.modify) {

this.$confirm(‘${this.serviceWarning}`, “提示”, {

confirmButtonText: “确定”,

cancelButtonText: “取消”,

type: “warning”

})

.then(() => {

this.$message({

type: “success”,

message: “修改成功!”

});

})

.catch(() => {

this.val = this.oldInputVal;

this.$message({

type: “info”,

message: “已取消修改”

});

});

}

this.getInputVal(this.val);

}

}

}

};

父组件

<ConfirmInput

title=“服务端口”

:isCheck=“true”

:getInputVal=“getServicePort”

:serviceVal=“servicePort.val + ‘’”

:disabled=“servicePort.disabled”

:tips=“servicePort.errMsg”

:isErr=“servicePort.isErr”

:serviceSwitch=“serviceSwitch.val”

:serviceWarning=“serviceWarning”

:modify=“true”

/>