Vue组件封装之input输入框实战记录

import inputstyle from '@/components/input.vue'
export default {
    components: {inputstyle},
}

<inputstyle :input_data="input_data[0]"></inputstyle>

export default {
   ...
	input_data: [
              {
                type: 'text',
                name: 'email',
                placeholder: '请输入邮箱',
                state: 0,
                reg: '^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$',
                error_type: '',
                message: ['邮箱不能为空哦', '邮箱格式有误']
              },
              {
                type: 'password',
                name: 'pwd',
                placeholder: '请输入密码',
                state: 0,
                reg: '[a-z0-9]{8,16}',
                error_type: '',
                message: ['密码不能为空哦!','请输入大于8位数小于16位数的字母或数字!']
              }
     ],
}

<template>
    <input :type="input_data.type" :placeholder="input_data.placeholder" @blur="style($event)">
</template>

        changeData(e){
            // 密码类型用md5加密
            if(this.input_data.type = 'password') {
                this.$emit('update:changeData', md5(e.target.value.trim()))
            }else {
                this.$emit('update:changeData', e.target.value.trim())
            }
        }

            message: {
              // 错误信息提示
              error_message: '',
              // 错误提示条的透明度
              opacity: 0,
              // 控制提交按钮
              go: false
            },

       watch: {
          'message.error_message': {
            handler(){
              this.alertmessage()
            }
          }
        }

export default {
	props:['input_data']
	methods: {
        // 根据 is_format判断数据格式是否正确,并将检验的信息传给父组件
        style(e) {
            let reg = null
            reg = eval(`/${this.input_data.reg}/`)
            let state = reg.test(e.target.value)
            if(!state) {
                this.$emit('update:statechange', false)
                if(e.target.value) {               
                    this.$emit('update:error_typechange', 1)
                    // 下文有讲
                    this.$emit('update:error_message', this.input_data.message[1])
                }else {
                    this.$emit('update:error_typechange', 0)
                    this.$emit('update:error_message', this.input_data.message[0])
                }
            }else {
            this.$emit('update:statechange', true)
            }
        },
	}
}

for(let i = 0; i < this.is_format.length; i ++) {
	if(!this.is_format[i].style) {
        								                    this.errormessage=this.is_format[i].message[this.is_format[i].error_type]
       this.alertmessage()
       this.go = false
       break;
    }
       this.go = true
 }