New Huajishe Check ChaoXing
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Textarea Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
|
||||
adjust-position | Boolean | true | \- | N
|
||||
allow-input-over-max | Boolean | false | \- | N
|
||||
autofocus | Boolean | false | \- | N
|
||||
autosize | Boolean / Object | false | Typescript:`boolean \| { maxHeight?: number, minHeight?: number }` | N
|
||||
bordered | Boolean | false | \- | N
|
||||
confirm-hold | Boolean | false | \- | N
|
||||
confirm-type | String | return | options: return/send/search/next/go/done。Typescript:`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
|
||||
cursor | Number | -1 | \- | N
|
||||
cursor-spacing | Number | 0 | \- | N
|
||||
disable-default-padding | Boolean | false | \- | N
|
||||
disabled | Boolean | undefined | \- | N
|
||||
fixed | Boolean | false | \- | N
|
||||
focus | Boolean | false | \- | N
|
||||
hold-keyboard | Boolean | false | \- | N
|
||||
indicator | Boolean | false | \- | N
|
||||
label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
maxcharacter | Number | - | \- | N
|
||||
maxlength | Number | -1 | \- | N
|
||||
placeholder | String | undefined | \- | N
|
||||
placeholder-class | String | textarea-placeholder | \- | N
|
||||
placeholder-style | String | - | \- | N
|
||||
readonly | Boolean | undefined | \- | N
|
||||
selection-end | Number | -1 | \- | N
|
||||
selection-start | Number | -1 | \- | N
|
||||
show-confirm-bar | Boolean | true | \- | N
|
||||
value | String / Number | - | Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N
|
||||
default-value | String / Number | undefined | uncontrolled property。Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N
|
||||
|
||||
### Textarea Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
blur | `(value: TextareaValue, cursor: number)` | \-
|
||||
change | `(value: TextareaValue, cursor: number)` | \-
|
||||
enter | `(value: TextareaValue)` | \-
|
||||
focus | `(value: TextareaValue)` | \-
|
||||
keyboardheightchange | `(height: number, duration: number)` | \-
|
||||
line-change | `(value: TextareaValue)` | \-
|
||||
|
||||
### Textarea External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-indicator | \-
|
||||
t-class-label | \-
|
||||
t-class-textarea | \-
|
||||
|
||||
### 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 | -
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<a href="https://developers.weixin.qq.com/s/uw6f3imu7KSJ" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
|
||||
|
||||
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
|
||||
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
|
||||
</blockquote>
|
||||
|
||||
### 组件类型
|
||||
|
||||
基础多行文本框
|
||||
|
||||
{{ base }}
|
||||
|
||||
带标题多行文本框
|
||||
|
||||
{{ label }}
|
||||
|
||||
自动增高多行文本框
|
||||
|
||||
{{ autosize }}
|
||||
|
||||
设置最大字符个数
|
||||
|
||||
{{ maxlength }}
|
||||
|
||||
设置最大字符个数,一个汉字表示两个字符
|
||||
|
||||
{{ maxcharacter }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
禁用多行文本框
|
||||
|
||||
{{ disabled }}
|
||||
|
||||
### 自定义组件样式
|
||||
|
||||
标签外置输入框
|
||||
|
||||
{{ custom }}
|
||||
|
||||
## 提示
|
||||
|
||||
- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式,请使用名称为`t-textarea__placeholder`的Class选择器,直接覆盖组件内部样式(注意权重)。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Textarea Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
|
||||
adjust-position | Boolean | true | 键盘弹起时,是否自动上推页面 | N
|
||||
allow-input-over-max | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N
|
||||
autofocus | Boolean | false | 自动聚焦,拉起键盘 | N
|
||||
autosize | Boolean / Object | false | 是否自动增高,值为 true 时,style.height 不生效。支持传入对象,如 { maxHeight: 120, minHeight: 20 }。TS 类型:`boolean \| { maxHeight?: number, minHeight?: number }` | N
|
||||
bordered | Boolean | false | 是否显示外边框 | N
|
||||
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
|
||||
confirm-type | String | return | 设置键盘右下角按钮的文字,仅在 type='text'时生效。可选项:return/send/search/next/go/done。TS 类型:`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
|
||||
cursor | Number | -1 | 指定 focus 时的光标位置 | N
|
||||
cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
|
||||
disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N
|
||||
disabled | Boolean | undefined | 是否禁用文本框 | N
|
||||
fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域,需要显式指定属性 fixed 为 true | N
|
||||
focus | Boolean | false | 自动聚焦 | N
|
||||
hold-keyboard | Boolean | false | focus时,点击页面的时候不收起键盘 | N
|
||||
indicator | Boolean | false | 显示文本计数器,如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时, indicator无效 | N
|
||||
label | String / Slot | - | 左侧文本。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
maxcharacter | Number | - | 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 | N
|
||||
maxlength | Number | -1 | 用户最多可以输入的字符个数,值为 -1 的时候不限制最大长度 | N
|
||||
placeholder | String | undefined | 占位符 | N
|
||||
placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight | N
|
||||
placeholder-style | String | - | 指定 placeholder 的样式,目前仅支持 color ,font-size和font-weight | N
|
||||
readonly | Boolean | undefined | 只读状态 | N
|
||||
selection-end | Number | -1 | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | N
|
||||
selection-start | Number | -1 | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | N
|
||||
show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N
|
||||
value | String / Number | - | 文本框值。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N
|
||||
default-value | String / Number | undefined | 文本框值。非受控属性。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N
|
||||
|
||||
### Textarea Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
blur | `(value: TextareaValue, cursor: number)` | 失去焦点时触发
|
||||
change | `(value: TextareaValue, cursor: number)` | 输入内容变化时触发
|
||||
enter | `(value: TextareaValue)` | 点击完成时触发
|
||||
focus | `(value: TextareaValue)` | 获得焦点时触发
|
||||
keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
|
||||
line-change | `(value: TextareaValue)` | 行高发生变化时触发
|
||||
|
||||
### Textarea External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-indicator | 计数器样式类
|
||||
t-class-label | 左侧文本样式类
|
||||
t-class-textarea | 多行文本框样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 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
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdTextareaProps } from './type';
|
||||
declare const props: TdTextareaProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,108 @@
|
||||
const props = {
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
allowInputOverMax: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
autosize: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
confirmHold: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
value: 'return',
|
||||
},
|
||||
cursor: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
disabled: {
|
||||
type: null,
|
||||
value: undefined,
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
indicator: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
maxcharacter: {
|
||||
type: Number,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: undefined,
|
||||
},
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
value: 'textarea-placeholder',
|
||||
},
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
readonly: {
|
||||
type: null,
|
||||
value: undefined,
|
||||
},
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
value: -1,
|
||||
},
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
34
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts
vendored
Normal file
34
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/textarea.d.ts
vendored
Normal 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;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
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 !== null && val !== void 0 ? val : this.properties.defaultValue);
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
var _a;
|
||||
const { value, defaultValue } = this.properties;
|
||||
this.updateValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
|
||||
},
|
||||
};
|
||||
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) {
|
||||
const { allowInputOverMax } = this.properties;
|
||||
if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
|
||||
const { length, characters } = getCharacterLength('maxcharacter', value, allowInputOverMax ? Infinity : maxcharacter);
|
||||
return {
|
||||
value: characters,
|
||||
count: length,
|
||||
};
|
||||
}
|
||||
if (maxlength > 0 && !Number.isNaN(maxlength)) {
|
||||
const { length, characters } = getCharacterLength('maxlength', value, allowInputOverMax ? Infinity : maxlength);
|
||||
return {
|
||||
value: characters,
|
||||
count: length,
|
||||
};
|
||||
}
|
||||
return {
|
||||
value,
|
||||
count: value ? String(value).length : 0,
|
||||
};
|
||||
},
|
||||
onInput(event) {
|
||||
const { value, cursor } = event.detail;
|
||||
this.updateValue(value);
|
||||
this.triggerEvent('change', { value: this.data.value, cursor });
|
||||
},
|
||||
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;
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -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="{{allowInputOverMax ? -1 : maxlength}}"
|
||||
disabled="{{disabled || readonly}}"
|
||||
placeholder="{{placeholder}}"
|
||||
placeholder-class="{{classPrefix}}__placeholder {{placeholderClass}}"
|
||||
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>
|
||||
@@ -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,
|
||||
};
|
||||
@@ -0,0 +1,86 @@
|
||||
.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-text-color-primary, 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-text-color-primary, 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-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-textarea__indicator:not(:empty) {
|
||||
flex-shrink: 0;
|
||||
color: var(--td-textarea-indicator-text-color, var(--td-text-color-placeholder, 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, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-textarea .t-is-disabled {
|
||||
color: var(--td-textarea-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
114
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/type.d.ts
vendored
Normal file
114
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/textarea/type.d.ts
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
export interface TdTextareaProps {
|
||||
adjustPosition?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
allowInputOverMax?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
autofocus?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
autosize?: {
|
||||
type: null;
|
||||
value?: boolean | {
|
||||
maxHeight?: number;
|
||||
minHeight?: number;
|
||||
};
|
||||
};
|
||||
bordered?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmHold?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'return' | 'send' | 'search' | 'next' | 'go' | 'done';
|
||||
};
|
||||
cursor?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
cursorSpacing?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
disableDefaultPadding?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
fixed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
focus?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
holdKeyboard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
indicator?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
maxcharacter?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
maxlength?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
placeholder?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placeholderClass?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placeholderStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
selectionEnd?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
selectionStart?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
showConfirmBar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: TextareaValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: TextareaValue;
|
||||
};
|
||||
}
|
||||
export declare type TextareaValue = string | number;
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user