- textarea 多行输入框
- 属性说明
- 示例
- 代码示例
- 代码示例
textarea 多行输入框
解释：自定义多行输入框，支持白色主题（默认）、 边框主题和深色模式主题，可配置字符限制、错误提示方式等
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
theme |
String |
否 |
default |
多行输入框主题。default：默认白色主题，border：边框主题，dark：深色模式主题 |
|
placeholder |
String |
否 |
请输入内容 |
输入内容默认文案 |
|
placeholderStyle |
String |
否 |
输入内容默认文案的样式 |
|
|
contentLimit |
Number |
否 |
120 |
输入内容长度限制 |
|
width |
String |
否 |
auto |
输入框宽度 |
|
autoHeight |
Boolean |
否 |
false |
输入框高度是否自适应 |
|
promptType |
String |
否 |
toast |
输入超限提示类型。text：框下文字提示；toast：toast 提示超限；none：不提示 |
|
tipsEdge |
Number |
否 |
20 |
promptType 为 text 时，出现提示时的剩余可输入字符个数 |
|
toastText |
String |
否 |
超出字数限制 |
promptType 为 toast 时，提示文案内容 |
|
submitText |
String |
否 |
发表 |
发布按钮的文字内容 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<view class="wrap {{theme}}"><view class="card-panel" s-for="item,index in list"><view class="mode-title"><view class="mode-title-line-left"></view><view class="mode-title-text">{{item.titleBar}}</view><view class="mode-title-line-right"></view></view><view class="smt-card-area {{platform}}-card-area"><smt-textarea class="area-content {{item.theme}}-area-content {{item.autoHeight ? 'auto-height' : ''}}"theme="{{item.theme}}"placeholder="{{item.placeholder}}"placeholder-style="{{placeholderStyle}}"autoHeight="{{item.autoHeight}}"promptType="{{item.promptType}}"width="{{item.width}}"textarea-class="external-textarea-container"textarea-content-class="external-textarea-content"textarea-input-class="external-textarea-input"textarea-button-class="external-textarea-button"/></view></view><view class="smt-card-config"><view class="item-scroll"><text class="switch-text switch-text-before">沉浸式主题</text><switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch></view></view></view>
设计指南
必须要有输入超限提示（promptType），不可不提示
正确
字数超出有明确提示
错误
字数超出限制时，无提示
