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

<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事件检测

事件主要有以下几种

• focus获得焦点
• blur失去焦点
• input/change输入值改变

接下来看如何使用

<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>

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