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>