- 浏览: 405834 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
liyuanhoa_:
...
struts2.0中struts.xml配置文件详解 -
chenmingde:
...
Velocity应用(一) -
weizhikai_ai:
第二十六,当一个线程进入一个对象的一个synchronized ...
Java常见面试题(含答案) -
Aurora_lr:
...
Spring宠物商店学习笔记(一) - -
zs911zs:
all copy from http://www.iteye ...
Mule入门文档
A) Insert 组件
e.g.
<input type="text" jwcid="name@Insert" value="ognl:user.name"/>
页面表现时,将会到页面类中寻找getUser().getName()方法获取初值并输出
相当于在页面上显示数据.
B) TextField 组件
e.g.
<input type="text" jwcid="username@TextField" value="ognl:username"/>
页面表现时,将会到页面类中寻找getUsername()方法获取初值
*如果是修改信息页面,通常初始值要在页面表现之前由setUsername()手动设置从数据库中读取出来的值
表单提交时,通过setUsername()写入新值(即用户输入值),在类中通过getUsername()获取新值
相当于在修改个人信息时,首先读出用户名赋予文本框(用户名)初值,用户修改时填入新值,后台获取之
*Hidden属性区分是普通文本输入框(默认false)和密码输入框(hidden="ognl:true")
readonly属性设置只读 readonly="true"为只读(后台可读取)
*disabled属性设置是否可写 diabled="true"为不可写(后台也不可读取)
C) TextArea 组件
e.g.
<textarea jwcid="content@TextArea" value="ognl:content" cols="40" rows="10"></textarea>
页面表现时,将会到页面类中寻找getContent()方法获取初值
工作原理同TextField
D) RadioGroup/Radio 组件
e.g.
<span jwcid="headImage@RadioGroup" selected="ognl:headImage">
<input jwcid="@Radio" type="radio" value="1"/>头像1
<input jwcid="@Radio" type="radio" value="2"/>头像2
<input jwcid="@Radio" type="radio" value="3"/>头像3
<input jwcid="@Radio" type="radio" value="4"/>头像4
<input jwcid="@Radio" type="radio" value="5"/>头像5
<input jwcid="@Radio" type="radio" value="6"/>头像6
</span>
RadioGroup为每一个Radio提供一个唯一的ID。RadioGroup跟踪当前被选中的属性值,并且只有一个Radio能够被选中.
页面提交时,RadioGroup组件就利用OGNL表达式向headImage字段写入被选中的Radio组件的value参数值.
页面表现时(修改页面),将会到页面类中寻找getHeadImage()方法获取初值,然后寻找@Radio组件中与其相同的组件并勾选上.
E) PropertySelection 组件
使用PropertySelection组件必须要构造一个类来实现IPropertySelectionModel接口,并且重写该接口的5个方法.
public int getOptionCount() //提供下拉菜单的长度
public Object getOption(int index) //提供select标签的option
public String getLabel(int index) //提供select标签的Label值,也就是下拉菜单显示的内容
public String getValue(int index) //提供select标签的value值
public Object translateValue(String value) //selected后的返回值,value值未必就是我们需要的返回值,可以在这个方法里面对返回的value做对应的转换或修改.
e.g.1. 性别下拉框
<select jwcid="gender@ProPertySelection" name="genderSelect" value="ognl:gender" model="supportedGender">
<option selected>先生</option>
<option>女士</option>
</select>
Java代码
GenderSelectionModel.java
public class GenderSelectionModel implements IPropertySelectionModel {
public static final String male = "先生";
public static final String female = "女士";
public static final String[] genderOptions = { male, female };
public int getOptionCount() {
return genderOptions.length;
}
public Object getOption(int index) {
return this.translateValue(genderOptions[index]);
}
public String getLabel(int index) {
return genderOptions[index].toString();
}
public String getValue(int index) {
return genderOptions[index];
}
public Object translateValue(String value) {
if (value.equals("先生")) {
return "1";
} else {
return "0";
}
}
}
GenderSelectionModel.java
public class GenderSelectionModel implements IPropertySelectionModel {
public static final String male = "先生";
public static final String female = "女士";
public static final String[] genderOptions = { male, female };
public int getOptionCount() {
return genderOptions.length;
}
public Object getOption(int index) {
return this.translateValue(genderOptions[index]);
}
public String getLabel(int index) {
return genderOptions[index].toString();
}
public String getValue(int index) {
return genderOptions[index];
}
public Object translateValue(String value) {
if (value.equals("先生")) {
return "1";
} else {
return "0";
}
}
}
Java代码
ModUserInfo.java
public IPropertySelectionModel getSupportedGender() {
return new GenderSelectionModel();
}
ModUserInfo.java
public IPropertySelectionModel getSupportedGender() {
return new GenderSelectionModel();
}
存入数据库中"1"代表先生,"0"代表女士,通过translateValue(String value)方法转换
页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedGender().
然后通过getGender()方法获取初值,比如获取"0",则在页面显示时寻找value值为"0"的选项即为"女士",并选择之作为初始选择项.
e.g.2. 日志类型下拉框
<select jwcid="logType@PropertySelection" name="typeSelect" value="ognl:logType" model="supportedType">
<option>心情日记</option>
<option>情感天地</option>
<option>生活感触</option>
</select>
Java代码
TypeSelectionModel.java
public class TypeSelectionModel implements IPropertySelectionModel {
private List typeList = new ArrayList();
public TypeSelectionModel(List typeList) {
this.typeList = typeList;
}
public int getOptionCount() {
return typeList.size();
}
public Object getOption(int index) {
return ((LogType)typeList.get(index)).getValue();
}
public String getLabel(int index) {
return ((LogType) typeList.get(index)).getName();
}
public String getValue(int index) {
return ((LogType) typeList.get(index)).getValue();
}
public Object translateValue(String value) {
return value;
}
}
TypeSelectionModel.java
public class TypeSelectionModel implements IPropertySelectionModel {
private List typeList = new ArrayList();
public TypeSelectionModel(List typeList) {
this.typeList = typeList;
}
public int getOptionCount() {
return typeList.size();
}
public Object getOption(int index) {
return ((LogType)typeList.get(index)).getValue();
}
public String getLabel(int index) {
return ((LogType) typeList.get(index)).getName();
}
public String getValue(int index) {
return ((LogType) typeList.get(index)).getValue();
}
public Object translateValue(String value) {
return value;
}
}
Java代码
ModLog.java
public IPropertySelectionModel getSupportedType() {
TypeSelectionModel typeSelectionModel =
new TypeSelectionModel(loadType(getUser().getUserId()));
return typeSelectionModel;
}
private List loadType(int userid) {
...//从数据库载入该用户的日志类型列表
}
ModLog.java
public IPropertySelectionModel getSupportedType() {
TypeSelectionModel typeSelectionModel =
new TypeSelectionModel(loadType(getUser().getUserId()));
return typeSelectionModel;
}
private List loadType(int userid) {
...//从数据库载入该用户的日志类型列表
}
页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedType().
然后通过value属性给出的初始值即,getLogType()方法获取初值,比如获取"2",则在页面显示时寻找value值为"2"的选项即为"生活感触",并选择之作为初始选择项.
F) Form组件
e.g.
<form jwcid="logForm@Form">
...
</form>
Form的监听(listener)方法可以有两种方式:
1. 在Form组件中声明.
<form jwcid="logForm@Form" listener="ognl:listener:onLogin">
...
</form>
2. 在submit类型组件中声明.
<input type="submit" jwcid="onLogin@Submit" listener="listener:onLogin" value="发表"/>或者
<span jwcid="@ImageSubmit" image="..." listener="listener:onLogin"><img src="..." width="" height=""/></span>
前一种方式当Form中只要有submit就会触发监听方法,后一种方式是Form中有多个submit,各自实现不同的监听方法.
G) Foreach 组件
e.g.
<span jwcid="@Foreach" source="ognl:logList" value="ognl:item">
循环组件,遍历source参数,在表现其内容前更新value参数,将Foreach组件所包含的内容重复表现,其中可以通过value参数获取所需显示内容.
本例中,页面表现时通过getLogList()方法获取日志列表,循环取出其中数据更新item(日志对象)并予以显示.其中item需要在页面规范(.page)文件中声明:
<property name="item"/>
*class参数用来寻找类似CSS的文件对Foreach进行修饰.
Foreach组件: class="ognl:beans.evenOdd.next"
Page文件: <bean name="evenOdd" class="org.apache.tapestry.bean.EvenOdd"/>
CSS文件: tr.odd{background-color: #ffffff;}tr.even{background-color: #eeeeee;}
H) Conditional 组件
e.g.
<span jwcid="@Conditional" condition='ognl:item.sex.equals("1")'>先生</span>
<span jwcid="@Conditional" condition='ognl:item.sex.equals("0")'>女士</span>
conditional参数为true时运行Conditional组件中的HTML模板内容.
在Tapestry4.0以后就不支持该组件了, 可以使用其他组件来实现:
1. Contrib:Choose和Contrib:When
<library id="contrib" specification-path="classpath:/org/apache/tapestry/contrib/Contrib.library"/>(.application文件中引入Contrib类包)
<span jwcid="@contrib:Choose">
<span jwcid="@contrib:When" condition='ognl:user.gender.equals("1")'>先生</span>
<span jwcid="@contrib:When" condition='ognl:user.gender.equals("0")'>女士</span>
</span>
2. If组件
<span jwcid="@If" condition='ognl:item.sex.equals("1")'>先生</span>
<span jwcid="@If" condition='ognl:item.sex.equals("0")'>女士</span>
e.g.
<input type="text" jwcid="name@Insert" value="ognl:user.name"/>
页面表现时,将会到页面类中寻找getUser().getName()方法获取初值并输出
相当于在页面上显示数据.
B) TextField 组件
e.g.
<input type="text" jwcid="username@TextField" value="ognl:username"/>
页面表现时,将会到页面类中寻找getUsername()方法获取初值
*如果是修改信息页面,通常初始值要在页面表现之前由setUsername()手动设置从数据库中读取出来的值
表单提交时,通过setUsername()写入新值(即用户输入值),在类中通过getUsername()获取新值
相当于在修改个人信息时,首先读出用户名赋予文本框(用户名)初值,用户修改时填入新值,后台获取之
*Hidden属性区分是普通文本输入框(默认false)和密码输入框(hidden="ognl:true")
readonly属性设置只读 readonly="true"为只读(后台可读取)
*disabled属性设置是否可写 diabled="true"为不可写(后台也不可读取)
C) TextArea 组件
e.g.
<textarea jwcid="content@TextArea" value="ognl:content" cols="40" rows="10"></textarea>
页面表现时,将会到页面类中寻找getContent()方法获取初值
工作原理同TextField
D) RadioGroup/Radio 组件
e.g.
<span jwcid="headImage@RadioGroup" selected="ognl:headImage">
<input jwcid="@Radio" type="radio" value="1"/>头像1
<input jwcid="@Radio" type="radio" value="2"/>头像2
<input jwcid="@Radio" type="radio" value="3"/>头像3
<input jwcid="@Radio" type="radio" value="4"/>头像4
<input jwcid="@Radio" type="radio" value="5"/>头像5
<input jwcid="@Radio" type="radio" value="6"/>头像6
</span>
RadioGroup为每一个Radio提供一个唯一的ID。RadioGroup跟踪当前被选中的属性值,并且只有一个Radio能够被选中.
页面提交时,RadioGroup组件就利用OGNL表达式向headImage字段写入被选中的Radio组件的value参数值.
页面表现时(修改页面),将会到页面类中寻找getHeadImage()方法获取初值,然后寻找@Radio组件中与其相同的组件并勾选上.
E) PropertySelection 组件
使用PropertySelection组件必须要构造一个类来实现IPropertySelectionModel接口,并且重写该接口的5个方法.
public int getOptionCount() //提供下拉菜单的长度
public Object getOption(int index) //提供select标签的option
public String getLabel(int index) //提供select标签的Label值,也就是下拉菜单显示的内容
public String getValue(int index) //提供select标签的value值
public Object translateValue(String value) //selected后的返回值,value值未必就是我们需要的返回值,可以在这个方法里面对返回的value做对应的转换或修改.
e.g.1. 性别下拉框
<select jwcid="gender@ProPertySelection" name="genderSelect" value="ognl:gender" model="supportedGender">
<option selected>先生</option>
<option>女士</option>
</select>
Java代码
GenderSelectionModel.java
public class GenderSelectionModel implements IPropertySelectionModel {
public static final String male = "先生";
public static final String female = "女士";
public static final String[] genderOptions = { male, female };
public int getOptionCount() {
return genderOptions.length;
}
public Object getOption(int index) {
return this.translateValue(genderOptions[index]);
}
public String getLabel(int index) {
return genderOptions[index].toString();
}
public String getValue(int index) {
return genderOptions[index];
}
public Object translateValue(String value) {
if (value.equals("先生")) {
return "1";
} else {
return "0";
}
}
}
GenderSelectionModel.java
public class GenderSelectionModel implements IPropertySelectionModel {
public static final String male = "先生";
public static final String female = "女士";
public static final String[] genderOptions = { male, female };
public int getOptionCount() {
return genderOptions.length;
}
public Object getOption(int index) {
return this.translateValue(genderOptions[index]);
}
public String getLabel(int index) {
return genderOptions[index].toString();
}
public String getValue(int index) {
return genderOptions[index];
}
public Object translateValue(String value) {
if (value.equals("先生")) {
return "1";
} else {
return "0";
}
}
}
Java代码
ModUserInfo.java
public IPropertySelectionModel getSupportedGender() {
return new GenderSelectionModel();
}
ModUserInfo.java
public IPropertySelectionModel getSupportedGender() {
return new GenderSelectionModel();
}
存入数据库中"1"代表先生,"0"代表女士,通过translateValue(String value)方法转换
页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedGender().
然后通过getGender()方法获取初值,比如获取"0",则在页面显示时寻找value值为"0"的选项即为"女士",并选择之作为初始选择项.
e.g.2. 日志类型下拉框
<select jwcid="logType@PropertySelection" name="typeSelect" value="ognl:logType" model="supportedType">
<option>心情日记</option>
<option>情感天地</option>
<option>生活感触</option>
</select>
Java代码
TypeSelectionModel.java
public class TypeSelectionModel implements IPropertySelectionModel {
private List typeList = new ArrayList();
public TypeSelectionModel(List typeList) {
this.typeList = typeList;
}
public int getOptionCount() {
return typeList.size();
}
public Object getOption(int index) {
return ((LogType)typeList.get(index)).getValue();
}
public String getLabel(int index) {
return ((LogType) typeList.get(index)).getName();
}
public String getValue(int index) {
return ((LogType) typeList.get(index)).getValue();
}
public Object translateValue(String value) {
return value;
}
}
TypeSelectionModel.java
public class TypeSelectionModel implements IPropertySelectionModel {
private List typeList = new ArrayList();
public TypeSelectionModel(List typeList) {
this.typeList = typeList;
}
public int getOptionCount() {
return typeList.size();
}
public Object getOption(int index) {
return ((LogType)typeList.get(index)).getValue();
}
public String getLabel(int index) {
return ((LogType) typeList.get(index)).getName();
}
public String getValue(int index) {
return ((LogType) typeList.get(index)).getValue();
}
public Object translateValue(String value) {
return value;
}
}
Java代码
ModLog.java
public IPropertySelectionModel getSupportedType() {
TypeSelectionModel typeSelectionModel =
new TypeSelectionModel(loadType(getUser().getUserId()));
return typeSelectionModel;
}
private List loadType(int userid) {
...//从数据库载入该用户的日志类型列表
}
ModLog.java
public IPropertySelectionModel getSupportedType() {
TypeSelectionModel typeSelectionModel =
new TypeSelectionModel(loadType(getUser().getUserId()));
return typeSelectionModel;
}
private List loadType(int userid) {
...//从数据库载入该用户的日志类型列表
}
页面表现时,通过model属性给出的IPropertySelectionModel获取下拉选项,即getSupportedType().
然后通过value属性给出的初始值即,getLogType()方法获取初值,比如获取"2",则在页面显示时寻找value值为"2"的选项即为"生活感触",并选择之作为初始选择项.
F) Form组件
e.g.
<form jwcid="logForm@Form">
...
</form>
Form的监听(listener)方法可以有两种方式:
1. 在Form组件中声明.
<form jwcid="logForm@Form" listener="ognl:listener:onLogin">
...
</form>
2. 在submit类型组件中声明.
<input type="submit" jwcid="onLogin@Submit" listener="listener:onLogin" value="发表"/>或者
<span jwcid="@ImageSubmit" image="..." listener="listener:onLogin"><img src="..." width="" height=""/></span>
前一种方式当Form中只要有submit就会触发监听方法,后一种方式是Form中有多个submit,各自实现不同的监听方法.
G) Foreach 组件
e.g.
<span jwcid="@Foreach" source="ognl:logList" value="ognl:item">
循环组件,遍历source参数,在表现其内容前更新value参数,将Foreach组件所包含的内容重复表现,其中可以通过value参数获取所需显示内容.
本例中,页面表现时通过getLogList()方法获取日志列表,循环取出其中数据更新item(日志对象)并予以显示.其中item需要在页面规范(.page)文件中声明:
<property name="item"/>
*class参数用来寻找类似CSS的文件对Foreach进行修饰.
Foreach组件: class="ognl:beans.evenOdd.next"
Page文件: <bean name="evenOdd" class="org.apache.tapestry.bean.EvenOdd"/>
CSS文件: tr.odd{background-color: #ffffff;}tr.even{background-color: #eeeeee;}
H) Conditional 组件
e.g.
<span jwcid="@Conditional" condition='ognl:item.sex.equals("1")'>先生</span>
<span jwcid="@Conditional" condition='ognl:item.sex.equals("0")'>女士</span>
conditional参数为true时运行Conditional组件中的HTML模板内容.
在Tapestry4.0以后就不支持该组件了, 可以使用其他组件来实现:
1. Contrib:Choose和Contrib:When
<library id="contrib" specification-path="classpath:/org/apache/tapestry/contrib/Contrib.library"/>(.application文件中引入Contrib类包)
<span jwcid="@contrib:Choose">
<span jwcid="@contrib:When" condition='ognl:user.gender.equals("1")'>先生</span>
<span jwcid="@contrib:When" condition='ognl:user.gender.equals("0")'>女士</span>
</span>
2. If组件
<span jwcid="@If" condition='ognl:item.sex.equals("1")'>先生</span>
<span jwcid="@If" condition='ognl:item.sex.equals("0")'>女士</span>
发表评论
-
初识Firebug 全文 — firebug的使用
2009-02-09 14:53 1238http://www.ooso.net/index.php/a ... -
XmlHttp封装研究
2009-01-05 15:18 1522虽然ajax有很多很牛的框 ... -
web.xml详解
2008-12-31 18:03 6442部署描述符实际上是一 ... -
Windows下svn客户端TortoiseSVN的安装和操作
2008-12-23 17:15 2865介绍几家免费提供svn源代码管理的站点 国内: http:/ ... -
Ant入门
2008-12-19 12:07 2030一. 配置环境变量 1. 添加ANT_HOME—— ... -
xfire定义
2008-12-19 10:44 1336XFire是新一代的Java Web服 ... -
JSTL定义
2008-12-19 10:00 1002JSTL(JSP Standard Tag Lib ... -
UDDI定义
2008-12-19 09:47 1357UDDI Universal Descripti ... -
SOA定义
2008-12-19 09:47 1077向服务的体系结构(Serv ... -
SOAP定义
2008-12-19 09:43 1437soap n. (英文)肥皂 SOAP:简单对象访 ... -
XMLHttpRequest对象
2008-12-18 17:35 825<%@ page contentType="t ... -
掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
2008-12-17 11:53 828在 Web 请求中使用 XMLHttp ... -
掌握 Ajax 系列 一 Ajax 入门简介
2008-12-16 17:17 751Ajax 由 HTML、JavaScript™ ... -
响应重定向与请求转发
2008-12-16 12:16 2146摘要在javaEE Web组件开发中,页面之间的跳转无疑是必不 ... -
Struts分页的一个实现
2008-12-16 10:43 793在Web应用程序里,分页总让我们开发人员感到很头疼,倒不是因为 ... -
Tapestry 建立自己得 Validator
2008-12-11 17:07 856今天介绍一下如何建立自己得Validator 1. 建立Val ... -
正则表达式之道
2008-12-11 17:05 1137正则表达式之道 原 ... -
ognl的学习例子
2008-12-10 14:39 2090原贴见:http://blog.csdn.ne ... -
了解 Tapestry,第 1 部分
2008-12-09 15:16 1400在这篇由两部分构成的文章的前一部分中,作者兼 develope ... -
JS中文长度校验
2008-12-05 17:23 1457function changeAlert() { v ...
相关推荐
微信小程序第二章 基础组件textarea组件
react-textarea-autosize - 能够根据内容自动扩展的React textarea组件
响应 textarea 组件以自动扩展和收缩您的 textarea。 您可以。 链接 安装 安装软件包: $ npm i react-expanding-textarea 或者 $ yarn add react-expanding-textarea 用法 就像使用普通的<textarea>一样...
假设data中有这么一个info,它的值在onLoad时通过请求获取然后setData,然后textarea组件的value绑定了它,但这样的话,真机测试时数据是渲染不出来的 data{ info:'' }, 那么我们添加一段代码,就是在onReady...
主要介绍了微信小程序 textarea 组件详解及简单实例的相关资料,需要的朋友可以参考下
需求:清空 textarea 组件的内容。 需求是多么的简单,实现起来想想都觉得好简单(偷笑.jpg),有童鞋马上举手回答,提出了一个解决方案。 方案1 搭配 form 组件使用 form 组件绑定 bindreset 事件 添加一个 button ...
框架文本区域组件 用于Textarea组件。例子去做(欢迎拉动请求!) 自动换行支持比例字体支持原料药财产描述默认值科尔斯文本区域中的列数40 行数文本区域中的行数20 颜色文字颜色黑色的残障人士控件是否可以接收键盘...
1、解决wx.request 发起的是 HTTPS 请求的问题对于wx.request,大家可以理解为是微信小程序版的ajax,基于安全性考虑他的url地址必须是以https开头的,但对于一个开发者来说,这就有点不(cao)好(dan)啦。...
由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 ...
动态文字区 没有以div形式包装的textarea组件。 它还可以动态调整大小并与光环绑定一起使用!! 它看起来像: 如果您发现任何错误,请告诉我。
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
最近做的一个小程序需求,其中一个页面使用到了 textarea这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 textarea的 placeholder文字或者输入的文字内容,会直接穿透遮罩层和浮动...
秘银文本随文本变化该库包含用于两个组件TextInput和TextArea 。 这些组件具有ontextchange属性,该属性类似于oninput但有所不同。 在compositionstart和compositionend事件之间不会调度textchange事件。 当文本不变...
自定义 TextArea 组件 . . . . . . . . . . . . . . . . . . . . . . 110 自定义 TextInput 组件 . . . . . . . . . . . . . . . . . . . . . . 112 自定义 TileList 组件 . . . . . . . . . . . . . . . . . . . . ...
React异步输入 :memo: 目录 :rocket: 安装 您可以使用yarn或npm安装软件包 npm npm install async-input 纱 yarn add async-input :light_bulb: 用法 import React from 'react' import AsyncInput from 'async...
由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <button ...
用表情符号选择器React文本字段组件 该项目不再维护 感谢您的光临,但此项目已不再得到积极维护。 请考虑直接使用 。
react-textarea-autosize替换textarea组件的组件,该组件可在内容更改时自动调整textarea的大小。 流行的jQuery Autosize的本地React版本! 重量1.68KB(缩小并压缩)。 react-textarea-autosize替代textarea组件的...
首次在这里写点东西,还请各位大佬担待点。 摘要: ...在上一节的设计稿中,详细地址那块儿就是一个textarea组件。如图: (此图片来源于网络,如有侵权,请联系删除! ) 其他无关的就不说了,我们直接进