熟练掌握textarea组件的使用
它是什么?
textarea 多行输入组件
特性
1.placehold 设置占位符,提醒用户应该输入什么内容,或者输入的规则,只能输入数字等等 2.disabled 设置是否支持用户输入,设置为true 3.autofocus进入页面是否自动获得焦点 4.rows 组件允许显示的行数 5.如何将数据和变量进行绑定 6.慎用伪类,前方有坑 7.高度和行数同时设置,会怎么样 8.textarea事件检测
开始吧
1.设置placehold
6AC6E2E2-A951-4B0F-BBC5-6776DC4E58DC.png
<textarea placeholder="请输入您的姓名"></textarea>
注意 不要讲placehold写入到css样式中去,iOS 测试不起作用
2.设置用户不能输入内容
<textarea disabled="true" placeholder="请输入您的姓名"></textarea>
一般像这种用户不能使用的情况下,要将控件背景颜色设置成灰色系列,所以我们就借助伪类,设置一下
.textarea:disabled{
background-color: lightgray;
}
3E047F50-D55C-4D51-9E81-34BFCF375322.png
伪类格式:
样式类名 +‘:’ +伪类名称
注意这个组件在enabled 情况下会有些坑,继续往下看
3.自动获得焦点 当用户进入这个页面的时候,我们让某个textarea组件获得焦点,怎么设置呢?见下面的代码
<textarea autofocus="true></textarea>
4.rows多行显示
ED1920E8-2EE8-4101-8C7E-D55C3E102966.png
<textarea rows='10'></textarea>
注意
不能将rows设置在css样式中,这样做不会产生任何效果
这里解释一下rows='10' 是以系统字体40px为单位的,设置行高为十行,也就是说组件的高度为10*40px
5.如何将数据和变量进行绑定
我们先定义一个变量
export default{
data(){
return{
value:''
}
}
}
然后将变量绑定到组件上
<textarea v-model='value'><textarea>
解释一下
这个就是MVVM架构中的最常用的双向绑定,,双向绑定就是说,如果textarea 输入的值改变了,那么value的值也会随着改变,如果我们设置value的值,组件显示的值也会自动改变
6.慎用伪类,前方有坑
伪类的使用上面提过了,接下来我们看看还有那些伪类可以使用
// 输入激活
.textarea:active{
background-color: cornflowerblue;
}
// 组件不支持输入
.textarea:disabled{
background-color: lightgray;
}
// 组件获得焦点
.textarea:focus{
background-color: green;
}
// 组件可用
.textarea:enabled{
background-color: paleturquoise;
}
大坑
当你设置了伪类的时候,在输入框中输入内容,你会发现placehold仍然在,消失不了,所以请谨慎使用
A587F765-2236-4727-AFCA-88F7407FCEDE.png
7.高度和行数同时设置,会怎么样
如果你设置了rows
<textarea rows='10' placeholder="请输入您的姓名"> </textarea>
同时又设置了高度样式
.textarea{
background-color: paleturquoise;
font-size: 32px;
height:400px;
}
8.textarea事件检测
事件主要有以下几种
接下来看如何使用
<textarea class="textarea" v-model='value' disabled="false" autofocus="true" @input="input" @focus="focus" @blur="blur" rows='10' placeholder="请输入您的姓名"></textarea>
之前讲过事件绑定的完整写法是v-on:事件='定义的方法'
简写为@事件='定义的方法'
下面是定义的方法
<script>
export default{
methods:{
input(e){
},
focus(e){
},
blur(e){
}
}
}
</script>
本节的内容到这里已经全部讲完,这个组件的用法你掌握了吗?