vue input组件

组件效果:

 

HTML 代码:

<div class="input-widget">
<div class="input-validate">
<input
v-if="inputType =='text'"
type="text"
       :maxlength="maxLength"
:name="inputName"
:id="inputId"
:value="value"
:class="require"
:readOnly="readOnly"
:disabled="disabled"
:placeholder="placeholder"
@input="change($event)"
@click="click()"
@blur="blur()"
@keydown="keyDown()"
@keyup="keyUp()"
@focus="focus()"
/>
<input
v-if="inputType =='password'"
type="password"
       :maxlength="maxLength"
:name="inputName"
:id="inputId"
:value="value"
:class="require"
:readOnly="readOnly"
:disabled="disabled"
:placeholder="placeholder"
@input="change($event)"
@click="click()"
@blur="blur()"
@keydown="keyDown()"
@keyup="keyUp()"
@focus="focus()"
/>
<span :class="error">{{msg}}</span>
</div>
</div>

CSS 代码:
.required {
border: 1px solid red!important;
}
input{
background:none;
outline:none;
border:0px;
}
.error-msg {
display:block;
color:red;
font-size: 14px;
}
.input-validate input {
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
100%;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 30px;
line-height: 30px;
padding: 0px 10px;
}

JS 代码:
use([], function() {
Vue.component('myInputWidget', {
pageName: "common",
template: "public/widget/myInput/myInput.html",
props:[
"inputType","inputName","inputId","value","readOnly","disabled","placeholder",
"reg","errorMsg","required","maxLength","onClick","onBlur","onKeyDown","onKeyUp","onFocus"
],
data:function() {
return {
inputValue : this.value,
msg : "",
error : "",
require : "",
isValidate : false
}
},
created: function() {},
mounted: function() {
},
methods: {
change:function(ev){
this.inputValue = ev.target.value;

          this.$emit('input',this.inputValue);

this..check(this.inputValue);
},
isOk: function() {
this.isValidate = this.check(this.inputValue);

return this.isValidate;
},
check:function(val){
var that = this ;
var reg = new RegExp(that.reg);

if(that.required) {
that.msg = "";
that.error = "";
if(!$.trim(val)) {
that.require = "required";
return false;
} else {
that.require = "";
}
}else{
if(!$.trim(val)) {
that.msg = "";
that.error = "";
that.require = "";
return false;
}
}
if($.trim(val)) {
if(!reg.test(val)) {
that.showErrorMsg(that.errorMsg);
return false;
} else {
that.hideErrorMsg();
}
}
return true;
},
showErrorMsg:function(msg){
var that = this;
that.require = "required";
if(msg) {
that.msg = msg;
} else{
that.msg = '';
}
that.error = "error-msg";
},
hideErrorMsg:function(){
this.require = "";
this.msg = "";
this.error = "";
},
click:function(){
if(this.onClick){
this.onClick()
}
},
blur:function(){
if(this.onBlur){
this.onBlur()
}
},
keyDown:function(){
if(this.onKeyDown){
this.onKeyDown()
}
},
keyUp:function(){
if(this.onKeyUp){
this.onKeyUp()
}
},
focus:function(){
if(this.onFocus){
this.onFocus()
}
}
}
});
});

组件引入:

组件调用:

<div style="margin-top: 20px;">
<myInputWidget
inputType="text"
ref="passwordId"
v-model="passwordValue"
placeholder="输入密码"
reg="^[1-9]d*$"
errorMsg="请输入正整数"
required="true"
maxLength="10"
>
</myInputWidget>
</div>


原文地址:https://www.cnblogs.com/lovemiao/p/8667969.html