VUE的input框书写

HML部分

<input
:disabled="cpInputChsDisabled"
maxlength="cpInputChsMaxlength"
v-on:focus="vnFocus"
v-on:blur="vnBlurChs"
placeholder="cpInputChsPlaceholderData"
class="chs"
v-model.trim="cpInputValue">

JS部分 注释掉的部分是 部分表单验证 可以根据自己的需求选择添加

data() {
return {
cpInputValue:'',

cpInputChsPlaceholderData:''
};},

props: {
cpInputChsPlaceholder: {
type: String,
default:"文本输入框"
},
cpInputChsDisabled: {
type: Boolean,
default:false
},
cpInputChsMaxlength: {
type: Number,
default:10
},
cpInputChsHint: {
type: String,
default:"请输入正确的内容"
}
},
created () {
this.cpInputChsPlaceholderData=this.cpInputChsPlaceholder
},

methods:{
vnBlurChs(){
console.log(2)
var reg =/[\u4e00-\u9fa5]/;
//电话号码 var reg =/^(\d{3,4}-?)?\d{7,9}$/g;
//手机号码 var reg =/^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
//身份证 var reg =/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
// 邮箱 var reg =/^[_a-zA-Z0-9-.]+@([-_a-zA-Z0-9]+.)+[a-zA-Z0-9]{2,3}$/;
// QQ var reg =/^[1-9]\d{4,12}$
//邮编 var reg =/^[0-9]{6}$/;
//密码 var reg =var reg = /^[A-Za-z0-9]{6,10}$/;
// IP地址 var reg =/^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))).)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))).){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/;

let cpInputChs = this.cpInputValue
if (!cpInputChs) {
this.cpInputValue='';
this.cpInputChsPlaceholderData="输入内容不能为空"
return false;
}
if (!reg.test(cpInputChs)) {
this.cpInputValue=this.cpInputChsHint
return false;
}else{

}

},
vnFocus(){
console.log("已获取焦点")
}
},