weex-13-组件textarea使用

本节学习目标

熟练掌握textarea组件的使用

它是什么？

textarea 多行输入组件

特性

1.placehold 设置占位符,提醒用户应该输入什么内容,或者输入的规则,只能输入数字等等
2.disabled 设置是否支持用户输入,设置为true
3.autofocus进入页面是否自动获得焦点
4.rows 组件允许显示的行数
5.如何将数据和变量进行绑定
6.慎用伪类,前方有坑
7.高度和行数同时设置,会怎么样
8.textarea事件检测

开始吧

1.设置placehold

6AC6E2E2-A951-4B0F-BBC5-6776DC4E58DC.png

注意 不要讲placehold写入到css样式中去,iOS 测试不起作用

2.设置用户不能输入内容

一般像这种用户不能使用的情况下,要将控件背景颜色设置成灰色系列,所以我们就借助伪类,设置一下

.textarea:disabled{
    background-color: lightgray;
}

3E047F50-D55C-4D51-9E81-34BFCF375322.png

伪类格式：

样式类名 +‘:’ +伪类名称

注意这个组件在enabled 情况下会有些坑,继续往下看

3.自动获得焦点
当用户进入这个页面的时候,我们让某个textarea组件获得焦点,怎么设置呢？见下面的代码

 
  <div class="image-container" style="max-width: 347px; max-height: 202px;"> 
   <div class="image-view"> 
    <a href="http://img.e-com-net.com/image/info10/b8dbc6be74bd4c3796887a680f0d9616.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b8dbc6be74bd4c3796887a680f0d9616.jpg" width="347" height="202" alt="weex-13-组件textarea使用_第1张图片" style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    ED1920E8-2EE8-4101-8C7E-D55C3E102966.png 
  </div> 
 </div> 
 <p><textarea rows='10'>
 
 
注意
 
 
 
  
不能将rows设置在css样式中,这样做不会产生任何效果
 
 
 
 
这里解释一下rows='10' 是以系统字体40px为单位的,设置行高为十行,也就是说组件的高度为10*40px
 
 
5.如何将数据和变量进行绑定
 
 
我们先定义一个变量
 
 
export default{
    data(){
        return{
            value:''
        }
    }
}
 
 
然后将变量绑定到组件上
 
 
<textarea>
</code></pre> 
 <p>解释一下</p> 
 <blockquote> 
  <p>这个就是MVVM架构中的最常用的双向绑定,,双向绑定就是说,如果textarea 输入的值改变了,那么value的值也会随着改变,如果我们设置value的值,组件显示的值也会自动改变</p> 
 </blockquote> 
 <p><strong>6.慎用伪类,前方有坑</strong></p> 
 <p>伪类的使用上面提过了,接下来我们看看还有那些伪类可以使用</p> 
 <pre><code>    // 输入激活
.textarea:active{
    background-color: cornflowerblue;
}
    // 组件不支持输入
.textarea:disabled{
    background-color: lightgray;
}
   //  组件获得焦点
.textarea:focus{
    background-color: green;
}
   // 组件可用
.textarea:enabled{
    background-color: paleturquoise;
}
</code></pre> 
 <p>大坑</p> 
 <blockquote> 
  <p>当你设置了伪类的时候,在输入框中输入内容,你会发现placehold仍然在,消失不了,所以请谨慎使用</p> 
 </blockquote> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 341px; max-height: 79px;"> 
   <div class="image-view"> 
    <a href="http://img.e-com-net.com/image/info10/337bfabd0c5442c8b9fd172ea08d362b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/337bfabd0c5442c8b9fd172ea08d362b.jpg" width="341" height="79"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    A587F765-2236-4727-AFCA-88F7407FCEDE.png 
  </div> 
 </div> 
 <p><strong>7.高度和行数同时设置,会怎么样</strong></p> 
 <p>如果你设置了rows</p> 
 <pre><code><textarea  rows='10' placeholder="请输入您的姓名">  
 
 
同时又设置了高度样式
 
 
.textarea{
    background-color: paleturquoise;
    font-size: 32px;
    height:400px;
}
 
 
8.textarea事件检测
 
 
事件主要有以下几种
 
 
 
  
focus获得焦点
 
  
blur失去焦点
 
  
input/change输入值改变
 
 
 
 
接下来看如何使用
 
 

 
 
之前讲过事件绑定的完整写法是v-on:事件='定义的方法'简写为@事件='定义的方法'
 
 
下面是定义的方法
 
 

 
 
本节的内容到这里已经全部讲完,这个组件的用法你掌握了吗？