白色主题

This commit is contained in:
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions

View File

@@ -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)` | 键盘高度发生变化的时候触发此事件

View File

@@ -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;

View File

@@ -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;
};
}

View File

@@ -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);
},
};
}
};

View File

@@ -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 )}}"

View File

@@ -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;

View File

@@ -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;
};
}