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），不可不提示

正确

字数超出有明确提示

错误

字数超出限制时，无提示