W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
解釋: 多行輸入框,支持白色主題(默認)、 邊框主題和深色模式主題,可配置字符限制、錯誤提示方式等
屬性名 | 類型 | 必填 | 默認值 | 說明 |
---|---|---|---|---|
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)容 |
<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ù)超出限制時,無提示
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: