百度智能小程序 多行輸入框

2020-09-03 16:19 更新

textarea 自定義多行輸入框

解釋: 多行輸入框,支持白色主題(默認)、 邊框主題和深色模式主題,可配置字符限制、錯誤提示方式等

屬性說明

屬性名 類型 必填 默認值 說明
theme String default 多行輸入框主題:default: 默認白色主題,border: 邊框主題,dark: 深色模式主題
placeholder String 請輸入內(nèi)容 輸入內(nèi)容默認文案
placeholderStyle String 輸入內(nèi)容默認文案的樣式
contentLimit Number 120 輸入內(nèi)容長度限制
width String auto 輸入框寬度
autoHeight Boolean false 輸入框高度是否自適應
promptType String toast 輸入超限提示類型: 1.text:框下文字提示; 2.toast:toast 提示超限; 3.none:不提示
tipsEdge Number 20 promptType 為 text 時,出現(xiàn)提示時的剩余可輸入字符個數(shù)
toastText String 超出字數(shù)限制 promptType 為 toast 時,提示文案內(nèi)容
submitText String 發(fā)表 發(fā)布按鈕的文字內(nèi)容

示例 

在開發(fā)者工具中打開


代碼示例

<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>
Page({
    data: {
        platform: swan.getSystemInfoSync().platform,
        theme: '',
        placeholderStyle: 'color: #ccc;',
        list: [
            {
                titleBar: '輸入?yún)^(qū)高度固定',
                theme: 'default',
                placeholder: '輸入?yún)^(qū)高度固定,超過輸入高度出現(xiàn)滾動條'
            },
            {
                titleBar: '輸入?yún)^(qū)高度適應',
                theme: 'default',
                placeholder: '輸入?yún)^(qū)高度自適應,超過輸入高度出現(xiàn)滾動條',
                autoHeight: true
            },
            {
                titleBar: '輸入?yún)^(qū)寬度自定義',
                placeholder: '輸入?yún)^(qū)寬度自定義,超過輸入高度出現(xiàn)滾動條',
                theme: 'border',
                width: '580rpx'
            }
        ]
    },

    /**
     * 切換主題
     *
     * @param {Event} e 事件對象
     * @param {Object} e.detail 獲取checked值
     */
    changeTheme(e) {
        const checked = e.detail.checked;

        this.setData({
            theme: checked ? 'dark' : '',
            placeholderStyle: checked ? ' color: #b6cef0;' : 'color: #ccc;'
        });

        swan.nextTick(() => {
            swan.setBackgroundColor({
                backgroundColor: checked ? '#3670c2' : '#f5f5f5'
            });
        });
    }
});
.wrap {
    padding-top: .2rem;
    background: #f5f5f5;
}

.wrap .smt-card-area {
    margin: 25.362rpx 0 72.464rpx;
    background: #fff;
}

.wrap .default-area-content .external-textarea-container {
    height: 202.9rpx;
}

.wrap .default-area-content.auto-height .external-textarea-container {
    height: auto;
    min-height: 202.9rpx;
    overflow: hidden;
}

.ios-card-area .default-area-content.auto-height .external-textarea-content {
    padding-top: 0;
    margin-top: -25rpx;
} 

.wrap .border-area-content .external-textarea-container {
    height: 279.59rpx;
}

.wrap .init-switch {
    vertical-align: middle;
    margin: 28.986rpx 0;    
}

.wrap .switch-text-before {
    font-size: 28.986rpx;
    color: #333;
    display: flex;
    align-items: center;
}

.wrap .smt-card-config {
    background: #fff;
    overflow: hidden;
}

.wrap .item-logo {
    display: inline-block;
    width: 32.609rpx;
    height: 32.609rpx;
    margin: 34.005rpx 0;
}

.page-status-hover {
    opacity: .2;
}

.wrap.dark {
    background-color: #3670c2;
}

.wrap.dark .smt-card-config,
.wrap.dark .external-textarea-container,
.wrap.dark .external-textarea-input {
    background-color: #4985da;
    color: #fff;
}

.wrap.dark .border-area-content .external-textarea-content {
    border: 1px solid #7fa9e5;
}

.wrap.dark .external-textarea-button {
    background: #6d9de1;
    color: #fff;
}

.wrap.dark .switch-text-before {
    color: #fff;
    background: #4985da;
}

.wrap.dark .mode-title-line-left {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    opacity: .3;
}

.wrap.dark .mode-title-line-right {
    background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    opacity: .3;
}

.wrap.dark .mode-title-text {
    color: #fff;
}

.wrap.dark .swan-switch-input:after {
    background: #38f;
}
{
    "navigationBarTitleText": "textarea",
    "usingComponents": {
        "smt-textarea": "@smt-ui/component/src/textarea"
    },
    "navigationStyle": "custom"
}

設計指南

必須要有輸入超限提示(promptType),不可不提示

正確

字數(shù)超出有明確提示

錯誤

字數(shù)超出限制時,無提示


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號