cxc/points-mall-miniprogram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug fix and performance improvements

Browse Source
This commit is contained in:
quantulr
2023-08-18 17:32:18 +08:00
parent 3c6ab550cf
commit e750b9be9c
923 changed files with 46650 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/README.en-US.md Normal file
View File

@ -0,0 +1,46 @@
:: BASE_DOC ::
## API
### Textarea Props
name | type | default | description | required
-- | -- | -- | -- | --
adjust-position | Boolean | true | \- | N
autofocus | Boolean | false | \- | N
autosize | Boolean | false | \- | N
confirm-hold | Boolean | false | \- | N
confirm-type | String | done | options：send/search/next/go/done。Typescript：`'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
cursor-spacing | Number | 0 | \- | N
disabled | Boolean | false | \- | N
external-classes | Array | - | `['t-class', 't-class-textarea', 't-class-label']` | N
focus | Boolean | false | \- | N
label | String / Slot | - | \- | N
maxcharacter | Number | - | \- | N
maxlength | Number | - | \- | N
placeholder | String | undefined | \- | N
value | String | - | \- | N
default-value | String | undefined | uncontrolled property | N
### Textarea Events
name | params | description
-- | -- | --
blur | `(value: TextareaValue)` | \-
change | `(value: TextareaValue)` | \-
enter | `(value: TextareaValue)` | \-
focus | `(value: TextareaValue)` | \-
line-change | `(value: TextareaValue)` | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-textarea-background-color | @bg-color-container | -
--td-textarea-border-color | rgba(220, 220, 220, 1) | -
--td-textarea-border-radius | @radius-default | -
--td-textarea-disabled-text-color | @font-gray-4 | -
--td-textarea-indicator-text-color | @font-gray-3 | -
--td-textarea-label-color | @font-gray-1 | -
--td-textarea-placeholder-color | @font-gray-3 | -
--td-textarea-text-color | @font-gray-1 | -

120
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/README.md Normal file
View File

@ -0,0 +1,120 @@
---
title: Textarea 多行文本框
description: 用于多行文本信息输入。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-92%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-textarea": "tdesign-miniprogram/textarea/textarea"
}
```
## 代码演示
### 组件类型
基础多行文本框
{{ base }}
带标题多行文本框
{{ label }}
自动增高多行文本框
{{ autosize }}
设置最大字符个数
{{ maxlength }}
设置最大字符个数，一个汉字表示两个字符
{{ maxcharacter }}
### 组件状态
禁用多行文本框
{{ disabled }}
### 自定义组件样式
标签外置输入框
{{ custom }}
## 提示
- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式，请使用名称为`t-textarea__placeholder`的Class选择器，直接覆盖组件内部样式（注意权重）。
## API
### Textarea Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } | N
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
disabled | Boolean | false | 是否禁用文本框 | N
focus | Boolean | false | 自动聚焦 | N
label | String / Slot | - | 左侧文本 | N
maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
maxlength | Number | -1 | 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 | N
indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N
placeholder | String | undefined | 占位符 | N
placeholderStyle | String | '' | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
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
名称 | 参数 | 描述
-- | -- | --
blur | `(value: TextareaValue)` | 失去焦点时触发
change | `(value: TextareaValue)` | 输入内容变化时触发
enter | `(value: TextareaValue)` | 点击完成时触发
focus | `(value: TextareaValue)` | 获得焦点时触发
line-change | `(value: TextareaValue)` | 行高发生变化时触发
keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
### Textarea 外部样式类
类名 | 说明
-- | --
t-class | 根节点样式类
t-class-textarea | 占位符样式类
t-class-label | 左侧文本样式类
t-class-indicator | 计数器样式类
### CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-textarea-background-color | @bg-color-container | -
--td-textarea-border-color | rgba(220, 220, 220, 1) | -
--td-textarea-border-radius | @radius-default | -
--td-textarea-disabled-text-color | @font-gray-4 | -
--td-textarea-indicator-text-color | @font-gray-3 | -
--td-textarea-label-color | @font-gray-1 | -
--td-textarea-placeholder-color | @font-gray-3 | -
--td-textarea-text-color | @font-gray-1 | -

3
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import { TdTextareaProps } from './type';
declare const props: TdTextareaProps;
export default props;

100
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/props.js Normal file
View File

@ -0,0 +1,100 @@
const props = {
adjustPosition: {
type: Boolean,
value: true,
},
autofocus: {
type: Boolean,
value: false,
},
autosize: {
type: null,
value: false,
},
confirmHold: {
type: Boolean,
value: false,
},
confirmType: {
type: String,
value: 'return',
},
cursorSpacing: {
type: Number,
value: 0,
},
disabled: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
focus: {
type: Boolean,
value: false,
},
label: {
type: String,
},
fixed: {
type: Boolean,
value: false,
},
maxcharacter: {
type: Number,
},
maxlength: {
type: Number,
value: -1,
},
placeholder: {
type: String,
value: undefined,
},
placeholderStyle: {
type: String,
value: '',
},
value: {
type: String,
value: null,
},
defaultValue: {
type: String,
value: '',
},
bordered: {
type: Boolean,
value: false,
},
indicator: {
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;

34
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts vendored Normal file
View File

@ -0,0 +1,34 @@
import { SuperComponent } from '../common/src/index';
export default class Textarea extends SuperComponent {
options: {
multipleSlots: boolean;
};
behaviors: string[];
externalClasses: string[];
properties: import("./type").TdTextareaProps;
data: {
prefix: string;
classPrefix: string;
count: number;
};
observers: {
value(val: any): void;
};
lifetimes: {
ready(): void;
};
methods: {
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;
};
}

105
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.js Normal file
View File

@ -0,0 +1,105 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { getCharacterLength } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-textarea`;
let Textarea = class Textarea extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.behaviors = ['wx://form-field'];
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-textarea`,
`${prefix}-class-label`,
`${prefix}-class-indicator`,
];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
count: 0,
};
this.observers = {
value(val) {
this.updateCount(val);
},
};
this.lifetimes = {
ready() {
const { value } = this.properties;
this.updateValue(value == null ? '' : value);
},
};
this.methods = {
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);
return {
value: characters,
count: length,
};
}
if (maxlength > 0 && !Number.isNaN(maxlength)) {
const { length, characters } = getCharacterLength('maxlength', value, maxlength);
return {
value: characters,
count: length,
};
}
return {
value,
count: value ? String(value).length : 0,
};
},
onInput(event) {
const { value } = event.detail;
this.updateValue(value);
this.triggerEvent('change', { value: this.data.value });
},
onFocus(event) {
this.triggerEvent('focus', Object.assign({}, event.detail));
},
onBlur(event) {
this.triggerEvent('blur', Object.assign({}, event.detail));
},
onConfirm(event) {
this.triggerEvent('enter', Object.assign({}, event.detail));
},
onLineChange(event) {
this.triggerEvent('line-change', Object.assign({}, event.detail));
},
onKeyboardHeightChange(e) {
this.triggerEvent('keyboardheightchange', e.detail);
},
};
}
};
Textarea = __decorate([
wxComponent()
], Textarea);
export default Textarea;

4
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.json Normal file
View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

50
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxml Normal file
View File

@ -0,0 +1,50 @@
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./textarea.wxs" module="this" />
<view
style="{{_._style([style, customStyle])}}"
class="{{classPrefix}} {{bordered? classPrefix + '--border' : ''}} class {{prefix}}-class"
>
<view class="{{classPrefix}}__label {{prefix}}-class-label">
<block wx:if="{{label}}">{{ label }}</block>
<slot name="label" />
</view>
<view class="{{classPrefix}}__wrapper">
<textarea
class="{{classPrefix}}__wrapper-inner {{disabled? prefix + '-is-disabled' : ''}} {{prefix}}-class-textarea"
style="{{this.textareaStyle(autosize)}}"
maxlength="{{maxlength}}"
disabled="{{disabled}}"
placeholder="{{placeholder}}"
placeholder-class="{{classPrefix}}__placeholder"
placeholder-style="{{placeholderStyle}}"
value="{{value}}"
auto-height="{{!!autosize}}"
auto-focus="{{autofocus}}"
fixed="{{fixed}}"
focus="{{focus}}"
cursor="{{cursor}}"
cursor-spacing="{{cursorSpacing}}"
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 )}}"
class="{{classPrefix}}__indicator {{prefix}}-class-indicator"
>
{{count}} / {{maxcharacter || maxlength}}
</view>
</view>
</view>

16
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxs Normal file
View File

@ -0,0 +1,16 @@
/* eslint-disable */
var utils = require('../common/utils.wxs');
function textareaStyle(autosize) {
if (autosize && autosize.constructor === 'Object') {
return utils._style({
'min-height': utils.addUnit(autosize.minHeight),
'max-height': utils.addUnit(autosize.maxHeight),
});
}
return '';
}
module.exports = {
textareaStyle: textareaStyle,
};

85
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/textarea.wxss Normal file
View File

@ -0,0 +1,85 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
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-container, var(--td-font-white-1, #ffffff)));
}
.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;
white-space: nowrap;
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;
min-width: 0;
min-height: 20px;
margin: 0;
padding: 0;
text-align: left;
background-color: transparent;
border: 0;
resize: none;
font-size: var(--td-font-size-m, 32rpx);
color: var(--td-textarea-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
line-height: 48rpx;
}
.t-textarea__placeholder {
color: var(--td-textarea-placeholder-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
font-size: var(--td-font-size-m, 32rpx);
}
.t-textarea__indicator:not(:empty) {
color: var(--td-textarea-indicator-text-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
font-size: var(--td-spacer-1, 24rpx);
text-align: right;
line-height: 40rpx;
padding-top: var(--td-spacer, 16rpx);
}
.t-textarea--border {
border-radius: var(--td-textarea-border-radius, var(--td-radius-default, 12rpx));
border: 2rpx solid var(--td-textarea-border-color, #dcdcdc);
}
.t-textarea .t-is-disabled {
color: var(--td-textarea-disabled-text-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}

106
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/type.d.ts vendored Normal file
View File

@ -0,0 +1,106 @@
export interface TdTextareaProps {
adjustPosition?: {
type: BooleanConstructor;
value?: boolean;
};
autofocus?: {
type: BooleanConstructor;
value?: boolean;
};
autosize?: {
type: null;
value?: boolean | object;
};
confirmHold?: {
type: BooleanConstructor;
value?: boolean;
};
confirmType?: {
type: StringConstructor;
value?: 'return' | 'send' | 'search' | 'next' | 'go' | 'done';
};
cursorSpacing?: {
type: NumberConstructor;
value?: number;
};
style?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-textarea', 't-class-label'];
};
fixed?: {
type: BooleanConstructor;
value?: boolean;
};
focus?: {
type: BooleanConstructor;
value?: boolean;
};
label?: {
type: StringConstructor;
value?: string;
};
maxcharacter?: {
type: NumberConstructor;
value?: number;
};
maxlength?: {
type: NumberConstructor;
value?: number;
};
placeholder?: {
type: StringConstructor;
value?: string;
};
placeholderStyle: {
type: StringConstructor;
value: string;
};
value?: {
type: StringConstructor;
value?: string;
};
defaultValue?: {
type: StringConstructor;
value?: string;
};
bordered?: {
type: BooleanConstructor;
value?: boolean;
};
indicator?: {
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;
};
}

1
miniprogram/miniprogram_npm/tdesign-miniprogram/textarea/type.js Normal file
View File

@ -0,0 +1 @@
export {};