❤ vue 使用原生组件

1、input输入框

① 想让我们的input输入框类型为时间，只需要为我们的输入框简单的加一个类型的type即可

<input type="date" id="birthday" name="birthday" placeholder="年/月/日">

我们还可以拿正则验证非空var reg_birthday = /^\d{4}\/\d{2}\/\d{2}$/;

② 但是如果我们想要输入验证类型的咋办呢：

//验证用户名方法(只能是数字字母和中文，不能包括特殊字符)

 var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;if(regex.test(value) == true){}else{}

③ input输入框默认选中

<input type="radio" name="reportVersionRadioButton" checked="true" value="">

④ input type为radio更改默认选中的颜色

/*单选框基本（未选中）的样式*/
input[type="radio"]{-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;display: block;width: 13px;height: 13px;border-radius: 50%;background-size: 100% auto;box-sizing:border-box;border:solid 1px #b0d235;}/*单选按钮选中后增加的样式*/input[type="radio"]:checked:before{content:"";display: block;width: 9px;height: 9px;margin: 1px;border-radius: 10px;background-color: #b0d235;}

常见的属性和方法

• 通过 disabled 属性指定是否禁用 input 组件

• 使用clearable属性即可得到一个可清空的输入框

• 使用show-password属性即可得到一个可切换显示隐藏的密码框

• 通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标

使用如下：

<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>

• 通过添加类型type="textarea" 转换为一个文本类型的输入框

• 设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

• 通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸

• maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计

• 想要统计字数：利用show-word-limit 达到限制文字的效果

2、textarea

textarea 鼠标移入后边框颜色修改

 <textarea class="ltbtextarea" cols="30" :rows="jujiaovalue?6:3" placeholder="请输入内容" @focus="jujiao" @blur="handelBlur" v-model="commentvalue"><div class="inputbot"></div></textarea>