bug fix and performance improvements
This commit is contained in:
quantulr
@ -0,0 +1,88 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Input Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | options：left/center/right | N
|
||||
layout | String | horizontal | options：vertical/horizontal | N
|
||||
borderless | Boolean | true | \- | N
|
||||
clearable | Boolean | false | \- | N
|
||||
disabled | Boolean | - | \- | N
|
||||
error-message | String | - | `deprecated` | N
|
||||
external-classes | Array | - | `['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N
|
||||
format | Function | - | Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
label | String / Slot | - | \- | N
|
||||
maxcharacter | Number | - | \- | N
|
||||
maxlength | Number | - | \- | N
|
||||
placeholder | String | undefined | \- | N
|
||||
prefix-icon | String / Slot | - | \- | N
|
||||
readonly | Boolean | false | \- | N
|
||||
size | String | small | options：small/medium。Typescript：`'medium' \| 'small'` | N
|
||||
status | String | default | options：default/success/warning/error | N
|
||||
suffix | String / Slot | - | \- | N
|
||||
suffix-icon | String / Slot | - | \- | N
|
||||
tips | String / Slot | - | \- | N
|
||||
value | String / Number | - | Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
default-value | String / Number | undefined | uncontrolled property。Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
type | String | text | options：text/number/idcard/digit/safe-password/nickname | N
|
||||
password | Boolean | false | \- | N
|
||||
placeholder-style | String | - | required | Y
|
||||
placeholder-class | String | input-placeholder | \- | N
|
||||
cursor-spacing | Number | 0 | \- | N
|
||||
auto-focus | Boolean | false | \- | N
|
||||
focus | Boolean | false | \- | N
|
||||
confirm-type | String | done | options：send/search/next/go/done | N
|
||||
always-embed | Boolean | false | \- | N
|
||||
confirm-hold | Boolean | false | \- | N
|
||||
cursor | Number | - | required | Y
|
||||
selection-start | Number | -1 | \- | N
|
||||
selection-end | Number | -1 | \- | N
|
||||
adjust-position | Boolean | true | \- | N
|
||||
hold-keyboard | Boolean | false | \- | N
|
||||
safe-password-cert-path | String | - | \- | N
|
||||
safe-password-length | Number | - | \- | N
|
||||
safe-password-time-stamp | Number | - | \- | N
|
||||
safe-password-nonce | String | - | \- | N
|
||||
safe-password-salt | String | - | \- | N
|
||||
safe-password-custom-hash | String | - | \- | N
|
||||
### Input Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
blur | `(value: InputValue)` | \-
|
||||
change | `(value: InputValue, cursor: number, keyCode: number)` | \-
|
||||
clear | \- | \-
|
||||
enter | `(value: InputValue)` | \-
|
||||
focus | `(value: InputValue)` | \-
|
||||
keyboardheightchange | `(height: number, duration: number)` | \-
|
||||
|
||||
|
||||
### CSS Variables
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-input-bg-color | @bg-color-container | -
|
||||
--td-input-border-color | @component-stroke | -
|
||||
--td-input-border-left-space | 32rpx | -
|
||||
--td-input-border-radius | @radius-default | -
|
||||
--td-input-border-right-space | 0 | -
|
||||
--td-input-default-text-color | @font-gray-1 | -
|
||||
--td-input-default-tips-color | @font-gray-3 | -
|
||||
--td-input-disabled-text-color | @text-color-disabled | -
|
||||
--td-input-error-text-color | @error-color | -
|
||||
--td-input-error-tips-color | @error-color | -
|
||||
--td-input-label-max-width | 5em | -
|
||||
--td-input-label-min-width | 2em | -
|
||||
--td-input-label-text-color | @font-gray-1 | -
|
||||
--td-input-placeholder-text-color | @text-color-placeholder | -
|
||||
--td-input-prefix-icon-color | @font-gray-1 | -
|
||||
--td-input-success-text-color | @success-color | -
|
||||
--td-input-success-tips-color | @success-color | -
|
||||
--td-input-suffix-icon-color | @font-gray-3 | -
|
||||
--td-input-suffix-text-color | @font-gray-1 | -
|
||||
--td-input-vertical-padding | 32rpx | -
|
||||
--td-input-warning-text-color | @warning-color | -
|
||||
--td-input-warning-tips-color | @warning-color | -
|
||||
173
miniprogram/miniprogram_npm/tdesign-miniprogram/input/README.md
Normal file
173
miniprogram/miniprogram_npm/tdesign-miniprogram/input/README.md
Normal file
@ -0,0 +1,173 @@
|
||||
---
|
||||
title: Input 输入框
|
||||
description: 用于单行文本信息输入。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-97%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-input": "tdesign-miniprogram/input/input"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
基础输入框
|
||||
|
||||
{{ base }}
|
||||
|
||||
带字数限制输入框
|
||||
|
||||
{{ maxlength }}
|
||||
|
||||
带操作输入框
|
||||
|
||||
{{ suffix }}
|
||||
|
||||
带图标输入框
|
||||
|
||||
{{ prefix }}
|
||||
|
||||
特定类型输入框
|
||||
|
||||
{{ special }}
|
||||
|
||||
### 02 组件状态
|
||||
|
||||
输入框状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
信息超长状态
|
||||
|
||||
{{ label }}
|
||||
|
||||
### 03 组件样式
|
||||
|
||||
内容位置
|
||||
|
||||
{{ align }}
|
||||
|
||||
竖排样式
|
||||
|
||||
{{ layout }}
|
||||
|
||||
非通栏样式
|
||||
|
||||
{{ banner }}
|
||||
|
||||
标签外置样式
|
||||
|
||||
{{ bordered }}
|
||||
|
||||
自定义样式文本框
|
||||
|
||||
{{ custom }}
|
||||
|
||||
|
||||
## API
|
||||
### Input Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
|
||||
layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
|
||||
borderless | Boolean | false | 是否开启无边框模式 | N
|
||||
clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
|
||||
disabled | Boolean | false | 是否禁用输入框 | N
|
||||
error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
|
||||
format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
label | String / Slot | - | 左侧文本。 | N
|
||||
maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
|
||||
maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
|
||||
placeholder | String | undefined | 占位符 | N
|
||||
prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
|
||||
readonly | Boolean | false | 【开发中】只读状态 | N
|
||||
size | String | medium | 【已废弃】输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
|
||||
status | String | - | 输入框状态。可选项：success/warning/error | N
|
||||
suffix | String / Slot | - | 后置图标前的后置内容 | N
|
||||
suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
|
||||
tips | String / Slot | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N
|
||||
type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N
|
||||
value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
|
||||
password | Boolean | false | 是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N
|
||||
placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
|
||||
placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
|
||||
cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N
|
||||
auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N
|
||||
focus | Boolean | false | 获取焦点 | N
|
||||
confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
|
||||
always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
|
||||
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
|
||||
cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
|
||||
selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
|
||||
selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
|
||||
adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
|
||||
hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
|
||||
safe-password-cert-path | String | - | 安全键盘加密公钥的路径，只支持包内路径 | N
|
||||
safe-password-length | Number | - | 安全键盘输入密码长度 | N
|
||||
safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N
|
||||
safe-password-nonce | String | - | 安全键盘加密盐值 | N
|
||||
safe-password-salt | String | - | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | N
|
||||
safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N
|
||||
|
||||
### Input Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
blur | `(value: InputValue)` | 失去焦点时触发
|
||||
change | `(value: InputValue, cursor: number, keyCode: number)` | 输入框值发生变化时触发；cursor 为光标位置；
|
||||
clear | \- | 清空按钮点击时触发
|
||||
enter | `(value: InputValue)` | 回车键按下时触发
|
||||
focus | `(value: InputValue)` | 获得焦点时触发
|
||||
keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
|
||||
nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效
|
||||
click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon';`<br/>
|
||||
|
||||
### CellGroup 外部样式类
|
||||
类名 | 说明
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-prefix-icon | 前置图标样式类
|
||||
t-class-label | 标题样式类
|
||||
t-class-input | 标题样式类
|
||||
t-class-clearable | 标题样式类
|
||||
t-class-suffix | 后置样式类
|
||||
t-class-suffix-icon` | 后置图标样式类
|
||||
t-class-tips | 提示样式类
|
||||
|
||||
### CSS 变量
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-input-bg-color | @bg-color-container | -
|
||||
--td-input-border-color | @component-stroke | -
|
||||
--td-input-border-left-space | 32rpx | -
|
||||
--td-input-border-radius | @radius-default | -
|
||||
--td-input-border-right-space | 0 | -
|
||||
--td-input-default-text-color | @font-gray-1 | -
|
||||
--td-input-default-tips-color | @font-gray-3 | -
|
||||
--td-input-disabled-text-color | @text-color-disabled | -
|
||||
--td-input-error-text-color | @error-color | -
|
||||
--td-input-error-tips-color | @error-color | -
|
||||
--td-input-label-max-width | 5em | -
|
||||
--td-input-label-min-width | 2em | -
|
||||
--td-input-label-text-color | @font-gray-1 | -
|
||||
--td-input-placeholder-text-color | @text-color-placeholder | -
|
||||
--td-input-prefix-icon-color | @font-gray-1 | -
|
||||
--td-input-success-text-color | @success-color | -
|
||||
--td-input-success-tips-color | @success-color | -
|
||||
--td-input-suffix-icon-color | @font-gray-3 | -
|
||||
--td-input-suffix-text-color | @font-gray-1 | -
|
||||
--td-input-vertical-padding | 32rpx | -
|
||||
--td-input-warning-text-color | @warning-color | -
|
||||
--td-input-warning-tips-color | @warning-color | -
|
||||
35
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.d.ts
vendored
Normal file
35
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.d.ts
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Input extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: import("./type").TdInputProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
classBasePrefix: string;
|
||||
excludeType: string[];
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
prefixIcon(v: any): void;
|
||||
suffixIcon(v: any): void;
|
||||
clearable(v: any): void;
|
||||
};
|
||||
methods: {
|
||||
updateValue(value: any): void;
|
||||
onInput(e: any): void;
|
||||
onFocus(e: any): void;
|
||||
onBlur(e: any): void;
|
||||
onConfirm(e: any): void;
|
||||
onSuffixClick(): void;
|
||||
onSuffixIconClick(): void;
|
||||
clearInput(e: any): void;
|
||||
onKeyboardHeightChange(e: any): void;
|
||||
onNickNameReview(e: any): void;
|
||||
};
|
||||
}
|
||||
121
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.js
Normal file
121
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.js
Normal file
@ -0,0 +1,121 @@
|
||||
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, calcIcon } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-input`;
|
||||
let Input = class Input extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-prefix-icon`,
|
||||
`${prefix}-class-label`,
|
||||
`${prefix}-class-input`,
|
||||
`${prefix}-class-clearable`,
|
||||
`${prefix}-class-suffix`,
|
||||
`${prefix}-class-suffix-icon`,
|
||||
`${prefix}-class-tips`,
|
||||
];
|
||||
this.behaviors = ['wx://form-field'];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
classBasePrefix: prefix,
|
||||
excludeType: ['number', 'digit'],
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
const { value } = this.properties;
|
||||
this.updateValue(value == null ? '' : value);
|
||||
},
|
||||
};
|
||||
this.observers = {
|
||||
prefixIcon(v) {
|
||||
this.setData({
|
||||
_prefixIcon: calcIcon(v),
|
||||
});
|
||||
},
|
||||
suffixIcon(v) {
|
||||
this.setData({
|
||||
_suffixIcon: calcIcon(v),
|
||||
});
|
||||
},
|
||||
clearable(v) {
|
||||
this.setData({
|
||||
_clearIcon: calcIcon(v, 'close-circle-filled'),
|
||||
});
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateValue(value) {
|
||||
const { maxcharacter, maxlength, type } = this.properties;
|
||||
const { excludeType } = this.data;
|
||||
if (!excludeType.includes(type) && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
|
||||
const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
|
||||
this.setData({
|
||||
value: characters,
|
||||
count: length,
|
||||
});
|
||||
}
|
||||
else if (!excludeType.includes(type) && maxlength > 0 && !Number.isNaN(maxlength)) {
|
||||
const { length, characters } = getCharacterLength('maxlength', value, maxlength);
|
||||
this.setData({
|
||||
value: characters,
|
||||
count: length,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setData({
|
||||
value,
|
||||
count: value ? String(value).length : 0,
|
||||
});
|
||||
}
|
||||
},
|
||||
onInput(e) {
|
||||
const { value, cursor, keyCode } = e.detail;
|
||||
this.updateValue(value);
|
||||
this.triggerEvent('change', { value: this.data.value, cursor, keyCode });
|
||||
},
|
||||
onFocus(e) {
|
||||
this.triggerEvent('focus', e.detail);
|
||||
},
|
||||
onBlur(e) {
|
||||
this.triggerEvent('blur', e.detail);
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.triggerEvent('enter', e.detail);
|
||||
},
|
||||
onSuffixClick() {
|
||||
this.triggerEvent('click', { trigger: 'suffix' });
|
||||
},
|
||||
onSuffixIconClick() {
|
||||
this.triggerEvent('click', { trigger: 'suffix-icon' });
|
||||
},
|
||||
clearInput(e) {
|
||||
this.triggerEvent('clear', e.detail);
|
||||
this.setData({ value: '' });
|
||||
},
|
||||
onKeyboardHeightChange(e) {
|
||||
this.triggerEvent('keyboardheightchange', e.detail);
|
||||
},
|
||||
onNickNameReview(e) {
|
||||
this.triggerEvent('nicknamereview', e.detail);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Input = __decorate([
|
||||
wxComponent()
|
||||
], Input);
|
||||
export default Input;
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
100
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxml
Normal file
100
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxml
Normal file
@ -0,0 +1,100 @@
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<wxs src="./input.wxs" module="this" />
|
||||
|
||||
<view
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="{{_.cls(classPrefix, [['border', !borderless]])}} {{classPrefix}}--layout-{{layout}} class {{prefix}}-class"
|
||||
aria-describedby
|
||||
>
|
||||
<!-- aria-describedby用于关联该行设置了aria-hidden的元素最近的焦点，解决触发焦点过度上下偏移的问题 -->
|
||||
<view class="{{classPrefix}}__wrap--prefix">
|
||||
<view class="{{classPrefix}}__icon--prefix">
|
||||
<slot name="prefix-icon" />
|
||||
<template
|
||||
wx:if="{{_prefixIcon}}"
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-prefix-icon', ariaHidden: true, ..._prefixIcon}}"
|
||||
/>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__label {{prefix}}-class-label" aria-hidden>
|
||||
<slot name="label" />
|
||||
<block wx:if="{{label}}">{{label}}</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="{{classPrefix}}__wrap">
|
||||
<view class="{{classPrefix}}__content {{classPrefix}}--{{status}}">
|
||||
<input
|
||||
maxlength="{{maxlength}}"
|
||||
disabled="{{disabled}}"
|
||||
placeholder="{{placeholder}}"
|
||||
placeholder-style="{{placeholderStyle}}"
|
||||
placeholder-class="{{classPrefix}}__placeholder {{placeholderClass}}"
|
||||
value="{{value}}"
|
||||
bindinput="onInput"
|
||||
bindfocus="onFocus"
|
||||
bindblur="onBlur"
|
||||
bindconfirm="onConfirm"
|
||||
bindkeyboardheightchange="onKeyboardHeightChange"
|
||||
bindnicknamereview="onNickNameReview"
|
||||
password="{{type === 'password'}}"
|
||||
type="{{type === 'password' ? 'text' : type}}"
|
||||
focus="{{focus}}"
|
||||
confirm-type="{{confirmType}}"
|
||||
confirm-hold="{{confirmHold}}"
|
||||
cursor="{{cursor}}"
|
||||
cursor-spacing="{{cursorSpacing}}"
|
||||
adjust-position="{{adjustPosition}}"
|
||||
auto-focus="{{autoFocus}}"
|
||||
always-embed="{{alwaysEmbed}}"
|
||||
selection-start="{{selectionStart}}"
|
||||
selection-end="{{selectionEnd}}"
|
||||
hold-keyboard="{{holdKeyboard}}"
|
||||
safe-password-cert-path="{{safePasswordCertPath}}"
|
||||
safe-password-length="{{safePasswordLength}}"
|
||||
safe-password-time-stamp="{{safePasswordTimeStamp}}"
|
||||
safe-password-nonce="{{safePasswordNonce}}"
|
||||
safe-password-salt="{{safePasswordSalt}}"
|
||||
safe-password-custom-hash="{{safePasswordCustomHash}}"
|
||||
class="{{this.getInputClass(classPrefix, suffix, align, disabled)}} {{prefix}}-class-input"
|
||||
aria-role="textbox"
|
||||
aria-label="{{label}}"
|
||||
aria-roledescription="{{label}}"
|
||||
/>
|
||||
<!--
|
||||
这里aria-role="textbox"和aria-label组合使用实现ios的聚合焦点播报效果。
|
||||
ios会播报aria-label，不会重复播报aria-roledescription的内容；
|
||||
安卓不会播报aria-label，会播报aria-roledescription的内容
|
||||
-->
|
||||
<view
|
||||
wx:if="{{_clearIcon && value.length > 0}}"
|
||||
class="{{classPrefix}}__wrap--clearable-icon"
|
||||
bind:touchstart="clearInput"
|
||||
>
|
||||
<template
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-clearable', ariaRole: 'button', ariaLabel: '清除', ..._clearIcon }}"
|
||||
/>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__wrap--suffix {{prefix}}-class-suffix" bind:tap="onSuffixClick">
|
||||
<text wx:if="{{suffix}}">{{suffix}}</text>
|
||||
<slot name="suffix" />
|
||||
</view>
|
||||
<view class="{{classPrefix}}__wrap--suffix-icon" bind:tap="onSuffixIconClick">
|
||||
<slot name="suffix-icon" />
|
||||
<template
|
||||
wx:if="{{_suffixIcon}}"
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-suffix-icon', ariaRole: 'button', ..._suffixIcon }}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{tips && tips.length > 0}}"
|
||||
class="{{classPrefix}}__tips {{classPrefix}}--{{align}} {{prefix}}-class-tips"
|
||||
>{{tips}}
|
||||
</view>
|
||||
<slot name="tips" />
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,16 @@
|
||||
function getInputClass(classPrefix, suffix, align, disabled) {
|
||||
var className = [classPrefix + '__control'];
|
||||
|
||||
if (align) {
|
||||
className.push(classPrefix + '--' + align);
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
className.push(classPrefix + '__control--disabled');
|
||||
}
|
||||
return className.join(' ');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getInputClass: getInputClass,
|
||||
};
|
||||
186
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxss
Normal file
186
miniprogram/miniprogram_npm/tdesign-miniprogram/input/input.wxss
Normal file
@ -0,0 +1,186 @@
|
||||
.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-input {
|
||||
background-color: var(--td-input-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: var(--td-input-vertical-padding, 32rpx);
|
||||
}
|
||||
.t-input--border {
|
||||
position: relative;
|
||||
}
|
||||
.t-input--border::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-input-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-input--border::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-input--border:after {
|
||||
left: var(--td-input-border-left-space, 32rpx);
|
||||
right: var(--td-input-border-right-space, 0);
|
||||
}
|
||||
.t-input--layout-vertical {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
.t-input__wrap--prefix {
|
||||
display: flex;
|
||||
}
|
||||
.t-input__icon--prefix {
|
||||
font-size: 48rpx;
|
||||
color: var(--td-input-prefix-icon-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-input__label:not(:empty) {
|
||||
min-width: var(--td-input-label-min-width, 2em);
|
||||
max-width: var(--td-input-label-max-width, 5em);
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
line-height: 48rpx;
|
||||
color: var(--td-input-label-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
margin-right: var(--td-spacer-2, 32rpx);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.t-input--layout-vertical .t-input__label:not(:empty) {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
.t-input__icon--prefix:not(:empty) + .t-input__label:not(:empty) {
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
.t-input__label:not(:empty) + .t-input__wrap {
|
||||
margin-left: var(--td-spacer-2, 32rpx);
|
||||
}
|
||||
.t-input__icon--prefix:not(:empty) + .t-input__label:empty {
|
||||
margin-right: var(--td-spacer-2, 32rpx);
|
||||
}
|
||||
.t-input__wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-shrink: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.t-input__wrap .t-input__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 48rpx;
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-input__wrap--clearable-icon,
|
||||
.t-input__wrap--suffix-icon,
|
||||
.t-input__wrap--suffix {
|
||||
flex: 0 0 auto;
|
||||
padding-left: var(--td-spacer-1, 24rpx);
|
||||
}
|
||||
.t-input__wrap--clearable-icon:empty,
|
||||
.t-input__wrap--suffix-icon:empty,
|
||||
.t-input__wrap--suffix:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-input__wrap--clearable-icon,
|
||||
.t-input__wrap--suffix-icon {
|
||||
font-size: 48rpx;
|
||||
color: var(--td-input-suffix-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-input__wrap--suffix {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
color: var(--td-input-suffix-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-input__icon--prefix:empty,
|
||||
.t-input__tips:empty,
|
||||
.t-input__wrap--clearable-icon:empty,
|
||||
.t-input__wrap--suffix-icon:empty,
|
||||
.t-input__wrap--suffix:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-input__control {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 48rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--td-input-default-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
line-height: inherit;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
resize: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
.t-input__control--disabled {
|
||||
color: var(--td-input-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
.t-input__control--read-only {
|
||||
cursor: default;
|
||||
}
|
||||
.t-input--left {
|
||||
text-align: left;
|
||||
}
|
||||
.t-input--right {
|
||||
text-align: right;
|
||||
}
|
||||
.t-input--center {
|
||||
text-align: center;
|
||||
}
|
||||
.t-input__placeholder {
|
||||
color: var(--td-input-placeholder-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-input__tips {
|
||||
font-size: var(--td-font-size-s, 24rpx);
|
||||
line-height: 40rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
.t-input--default + .t-input__tips {
|
||||
color: var(--td-input-default-tips-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-input--success + .t-input__tips {
|
||||
color: var(--td-input-success-tips-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
|
||||
}
|
||||
.t-input--warning + .t-input__tips {
|
||||
color: var(--td-input-warning-tips-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
|
||||
}
|
||||
.t-input--error + .t-input__tips {
|
||||
color: var(--td-input-error-tips-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
3
miniprogram/miniprogram_npm/tdesign-miniprogram/input/props.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/input/props.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import { TdInputProps } from './type';
|
||||
declare const props: TdInputProps;
|
||||
export default props;
|
||||
159
miniprogram/miniprogram_npm/tdesign-miniprogram/input/props.js
Normal file
159
miniprogram/miniprogram_npm/tdesign-miniprogram/input/props.js
Normal file
@ -0,0 +1,159 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
borderless: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
clearable: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
errorMessage: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
format: {
|
||||
type: null,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
maxcharacter: {
|
||||
type: Number,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: undefined,
|
||||
},
|
||||
prefixIcon: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium',
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
},
|
||||
suffixIcon: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
optionalTypes: [Number],
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: String,
|
||||
optionalTypes: [Number],
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
value: 'text',
|
||||
},
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
value: 'input-placeholder',
|
||||
},
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
autoFocus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
value: 'done',
|
||||
},
|
||||
alwaysEmbed: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
confirmHold: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
cursor: {
|
||||
type: Number,
|
||||
},
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
safePasswordCertPath: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
safePasswordLength: {
|
||||
type: Number,
|
||||
},
|
||||
safePasswordTimeStamp: {
|
||||
type: Number,
|
||||
},
|
||||
safePasswordNonce: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
safePasswordSalt: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
safePasswordCustomHash: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
174
miniprogram/miniprogram_npm/tdesign-miniprogram/input/type.d.ts
vendored
Normal file
174
miniprogram/miniprogram_npm/tdesign-miniprogram/input/type.d.ts
vendored
Normal file
@ -0,0 +1,174 @@
|
||||
export interface TdInputProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'center' | 'right';
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
borderless?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
clearable?: {
|
||||
type: null;
|
||||
value?: boolean | object;
|
||||
};
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
errorMessage?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg'];
|
||||
};
|
||||
format?: {
|
||||
type: null;
|
||||
value?: InputFormatType;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxcharacter?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxlength?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
placeholder?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
prefixIcon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'medium' | 'small';
|
||||
};
|
||||
status?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'success' | 'warning' | 'error';
|
||||
};
|
||||
suffix?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
suffixIcon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
tips?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'password' | 'nickname';
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<NumberConstructor>;
|
||||
value?: InputValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<NumberConstructor>;
|
||||
value?: InputValue;
|
||||
};
|
||||
placeholderStyle: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placeholderClass?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
cursorSpacing?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
autoFocus?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
focus?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'send' | 'search' | 'next' | 'go' | 'done';
|
||||
};
|
||||
alwaysEmbed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmHold?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
cursor: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
selectionStart?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
selectionEnd?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
adjustPosition?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
holdKeyboard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
safePasswordCertPath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
safePasswordLength?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
safePasswordTimeStamp?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
safePasswordNonce?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
safePasswordSalt?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
safePasswordCustomHash?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type InputFormatType = (value: InputValue) => number | string;
|
||||
export declare type InputValue = string | number;
|
||||
@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user