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

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

return () => {};

}

},

title: {

type: String,

default: “模块名称”

},

tips: {

type: String,

default: “”

},

isCheck: {

type: Boolean,

default: false

},

isErr: {

type: Boolean,

default: false

},

value: {

type: [String, Number],

default: “”

},

disabled: {

type: Boolean,

default: false

},

popoverText: {

type: String,

default: “”

},

gitInputBlur: {

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);

}

}

}

};