❤ vue 使用原生组件
1、做一个input输入框验证开始
① 想让我们的input输入框类型为时间,只需要为我们的输入框简单的加一个类型的type即可
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
我们还可以拿正则验证非空
var reg_birthday = /^\d{4}\/\d{2}\/\d{2}$/;
② 但是如果我们想要输入验证类型的咋办呢:
//验证用户名方法(只能是数字字母和中文,不能包括特殊字符)
js
var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
if(regex.test(value) == true){}
else{}
常见的属性和方法
-
通过
disabled
属性指定是否禁用 input 组件 -
使用
clearable
属性即可得到一个可清空的输入框 -
使用
show-password
属性即可得到一个可切换显示隐藏的密码框 -
通过
prefix-icon
和suffix-icon
属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标
使用如下:
js
<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 达到限制文字的效果