白色主题
This commit is contained in:
@@ -81,6 +81,12 @@ value | String | - | 文本框值 | N
|
||||
default-value | String | undefined | 文本框值。非受控属性 | N
|
||||
fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true | N
|
||||
bordered | Boolean | false | 是否显示外边框 | N
|
||||
cursor | Number | -1 | 指定 focus 时的光标位置 | N
|
||||
disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N
|
||||
show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N
|
||||
selection-start | Number | -1 | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | N
|
||||
selection-end | Number | -1 | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | N
|
||||
hold-keyboard | Boolean | false | focus时,点击页面的时候不收起键盘 | N
|
||||
|
||||
### Textarea Events
|
||||
|
||||
@@ -91,3 +97,4 @@ change | `(value: TextareaValue)` | 输入内容变化时触发
|
||||
enter | `(value: TextareaValue)` | 点击完成时触发
|
||||
focus | `(value: TextareaValue)` | 获得焦点时触发
|
||||
line-change | `(value: TextareaValue)` | 行高发生变化时触发
|
||||
keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
|
||||
|
||||
@@ -23,7 +23,7 @@ const props = {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
@@ -76,5 +76,29 @@ const props = {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
cursor: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
|
||||
@@ -14,12 +14,21 @@ export default class Textarea extends SuperComponent {
|
||||
observers: {
|
||||
value(val: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
updateValue(value: any): void;
|
||||
updateCount(val: any): void;
|
||||
updateValue(val: any): void;
|
||||
calculateValue(value: any, maxcharacter: any, maxlength: any): {
|
||||
value: any;
|
||||
count: number;
|
||||
};
|
||||
onInput(event: any): void;
|
||||
onFocus(event: any): void;
|
||||
onBlur(event: any): void;
|
||||
onConfirm(event: any): void;
|
||||
onLineChange(event: any): void;
|
||||
onKeyboardHeightChange(e: any): void;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -31,37 +31,55 @@ let Textarea = class Textarea extends SuperComponent {
|
||||
};
|
||||
this.observers = {
|
||||
value(val) {
|
||||
this.updateValue(val);
|
||||
this.updateCount(val);
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
const { value } = this.properties;
|
||||
this.updateValue(value);
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateValue(value) {
|
||||
updateCount(val) {
|
||||
const { maxcharacter, maxlength } = this.properties;
|
||||
const { count } = this.calculateValue(val, maxcharacter, maxlength);
|
||||
this.setData({
|
||||
count,
|
||||
});
|
||||
},
|
||||
updateValue(val) {
|
||||
const { maxcharacter, maxlength } = this.properties;
|
||||
const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
|
||||
this.setData({
|
||||
value,
|
||||
count,
|
||||
});
|
||||
},
|
||||
calculateValue(value, maxcharacter, maxlength) {
|
||||
if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
|
||||
const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
|
||||
this.setData({
|
||||
computedValue: characters,
|
||||
return {
|
||||
value: characters,
|
||||
count: length,
|
||||
});
|
||||
};
|
||||
}
|
||||
else if (maxlength > 0 && !Number.isNaN(maxlength)) {
|
||||
if (maxlength > 0 && !Number.isNaN(maxlength)) {
|
||||
const { length, characters } = getCharacterLength('maxlength', value, maxlength);
|
||||
this.setData({
|
||||
computedValue: characters,
|
||||
return {
|
||||
value: characters,
|
||||
count: length,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setData({
|
||||
computedValue: value,
|
||||
count: value ? String(value).length : 0,
|
||||
});
|
||||
};
|
||||
}
|
||||
return {
|
||||
value,
|
||||
count: value ? String(value).length : 0,
|
||||
};
|
||||
},
|
||||
onInput(event) {
|
||||
const { value } = event.detail;
|
||||
this.updateValue(value);
|
||||
this.triggerEvent('change', { value: this.data.computedValue });
|
||||
this.triggerEvent('change', { value: this.data.value });
|
||||
},
|
||||
onFocus(event) {
|
||||
this.triggerEvent('focus', Object.assign({}, event.detail));
|
||||
@@ -75,6 +93,9 @@ let Textarea = class Textarea extends SuperComponent {
|
||||
onLineChange(event) {
|
||||
this.triggerEvent('lineChange', Object.assign({}, event.detail));
|
||||
},
|
||||
onKeyboardHeightChange(e) {
|
||||
this.triggerEvent('keyboardheightchange', e.detail);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<view style="{{ customStyle }}" class="{{classPrefix}} {{bordered? classPrefix + '--border' : ''}} {{prefix}}-class">
|
||||
<view style="{{ style }}" class="{{classPrefix}} {{bordered? classPrefix + '--border' : ''}} {{prefix}}-class">
|
||||
<view class="{{classPrefix}}__label {{prefix}}-class-label">
|
||||
<view wx:if="{{ label && label.length > 0 }}">{{ label }}</view>
|
||||
<block wx:if="{{ label && label.length > 0 }}">{{ label }}</block>
|
||||
<slot wx:else name="label" />
|
||||
</view>
|
||||
<view class="{{classPrefix}}__wrapper">
|
||||
@@ -11,20 +11,27 @@
|
||||
placeholder="{{placeholder}}"
|
||||
placeholder-class="{{classPrefix}}__placeholder"
|
||||
placeholder-style="{{placeholderStyle}}"
|
||||
value="{{computedValue}}"
|
||||
value="{{value}}"
|
||||
auto-focus="{{autofocus}}"
|
||||
fixed="{{fixed}}"
|
||||
focus="{{focus}}"
|
||||
cursor="{{cursor}}"
|
||||
cursor-spacing="{{cursorSpacing}}"
|
||||
auto-height="{{autosize}}"
|
||||
adjust-position="{{adjustPosition}}"
|
||||
confirm-type="{{confirmType}}"
|
||||
confirm-hold="{{confirmHold}}"
|
||||
disable-default-padding="{{disableDefaultPadding}}"
|
||||
show-confirm-bar="{{showConfirmBar}}"
|
||||
selection-start="{{selectionStart}}"
|
||||
selection-end="{{selectionEnd}}"
|
||||
hold-keyboard="{{holdKeyboard}}"
|
||||
bindinput="onInput"
|
||||
bindfocus="onFocus"
|
||||
bindblur="onBlur"
|
||||
bindconfirm="onConfirm"
|
||||
bindlinechange="onLineChange"
|
||||
bind:keyboardheightchange="onKeyboardHeightChange"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{indicator && (maxcharacter > 0 || maxlength > 0 )}}"
|
||||
|
||||
@@ -26,12 +26,16 @@
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 32rpx;
|
||||
background-color: var(--td-textarea-background-color, var(--td-bg-color-block, #fff));
|
||||
}
|
||||
.t-textarea__label:not(:empty) {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
color: var(--td-textarea-label-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
flex-shrink: 0;
|
||||
line-height: 44rpx;
|
||||
padding-bottom: var(--td-spacer, 16rpx);
|
||||
overflow: hidden;
|
||||
@@ -39,13 +43,19 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.t-textarea__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-textarea__wrapper-inner {
|
||||
flex: 1 1 auto;
|
||||
box-sizing: border-box;
|
||||
width: inherit;
|
||||
height: 144rpx;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
@@ -23,7 +23,7 @@ export interface TdTextareaProps {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
@@ -79,4 +79,28 @@ export interface TdTextareaProps {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
cursor: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
showConfirmBar: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
selectionStart?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
selectionEnd?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
disableDefaultPadding?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
holdKeyboard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user