wh_components/package/Input/README.md

郭炜恒的vue组件库

### 输入框组件

#### 使用用例

```vue
<wh-input type="text" v-model="input" placeholder="请输入验证码" :rules="rules" :styleFocus="styleFocus" :styleInput="styleInput"></wh-input>

<wh-input type="image" multiple :maxlength="6" v-model="imglist"></wh-input>

<wh-input type="file" multiple :maxlength="6" v-model="filelist"></wh-input>


<script>
    data(){
        return{
			input: '',
      		filelist: [],
      		imglist: [],
            styleOwn: {
                // 'background': '#fff',
                'border-radius': '99px',
                'border':'1px solid #28b78d',
                'color':'#28b78d'
            },
            styleFocus:{
                'border-color': '#28b78d'
            },
            styleInput:{
                // 'font-size':'24px'
            },
        }
    }
</script>
```



#### 参数说明

```javascript
1. type 类型
	text	文本类型
    password	密码类型
    image  	上传图片
    file   	上传文件
    其他input标签合法格式
2. placeholder  输入框占位符
3. styleOwn		输入框样式
4. styleFocus	输入框激活状态样式
5. styleInput	控制输入字体样式
6. v-model
	type 为 text 或 password 时，需要绑定的数据
    type 为 image 或 file 时，绑定的数组，元素为 "文件地址" 或 "文件对象"
    v-model 绑定的数据可存在初始值
7. multiple		是否可以多选文件
8. maxlength	最大可上传的文件个数
9. rules	输入字符正则校验
   示例：rules: [
        { rule: 'required', tip: '此项是必填项' },
        { rule: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, tip: '请检查邮箱格式' },
      ],
    rule	规则("required"必传参数)
    tip		不满足条件时的提示
    
```