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>