first commit
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Textarea Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
adjust-position | Boolean | true | \- | N
|
||||
allow-input-over-max | Boolean | false | Allow input after exceeding `maxlength` or `maxcharacter` | 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-color | String | #0052d9 | \- | 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 | - | \- | 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 | - | `v-model:value` is supported。Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
|
||||
default-value | String / Number | - | uncontrolled property。Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
|
||||
|
||||
### Textarea Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
blur | `(context: { value: TextareaValue, cursor: number })` | \-
|
||||
change | `(context: { value: TextareaValue, cursor: number })` | \-
|
||||
enter | `(context: { value: TextareaValue })` | \-
|
||||
focus | `(context: { value: TextareaValue })` | \-
|
||||
keyboardheightchange | `(context: { height: number, duration: number })` | \-
|
||||
line-change | `(context: { value: TextareaValue })` | \-
|
||||
|
||||
### Textarea Slots
|
||||
|
||||
name | Description
|
||||
-- | --
|
||||
label | \-
|
||||
|
||||
### 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 | @component-border | -
|
||||
--td-textarea-border-radius | @radius-default | -
|
||||
--td-textarea-disabled-text-color | @text-color-disabled | -
|
||||
--td-textarea-indicator-text-color | @text-color-placeholder | -
|
||||
--td-textarea-label-color | @text-color-primary | -
|
||||
--td-textarea-padding | 32rpx | -
|
||||
--td-textarea-placeholder-color | @text-color-placeholder | -
|
||||
--td-textarea-text-color | @text-color-primary | -
|
||||
132
uni_modules/tdesign-uniapp/components/textarea/README.md
Normal file
132
uni_modules/tdesign-uniapp/components/textarea/README.md
Normal file
@@ -0,0 +1,132 @@
|
||||
---
|
||||
title: Textarea 多行文本框
|
||||
description: 用于多行文本信息输入。
|
||||
spline: form
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 引入
|
||||
|
||||
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
||||
|
||||
|
||||
```js
|
||||
import TTextarea from '@tdesign/uniapp/textarea/textarea.vue';
|
||||
```
|
||||
|
||||
### 组件类型
|
||||
|
||||
基础多行文本框
|
||||
|
||||
{{ base }}
|
||||
|
||||
带标题多行文本框
|
||||
|
||||
{{ label }}
|
||||
|
||||
自动增高多行文本框
|
||||
|
||||
{{ autosize }}
|
||||
|
||||
设置最大字符个数
|
||||
|
||||
{{ maxlength }}
|
||||
|
||||
设置最大字符个数,一个汉字表示两个字符
|
||||
|
||||
{{ maxcharacter }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
禁用多行文本框
|
||||
|
||||
{{ disabled }}
|
||||
|
||||
### 自定义组件样式
|
||||
|
||||
标签外置输入框
|
||||
|
||||
{{ custom }}
|
||||
|
||||
## 提示
|
||||
|
||||
- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式,请使用名称为`t-textarea__placeholder`的Class选择器,直接覆盖组件内部样式(注意权重)。
|
||||
|
||||
## API
|
||||
|
||||
### Textarea Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
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-color | String | #0052d9 | 【试验性】光标颜色,仅在 Skyline 下有效 | 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 | - | 左侧文本 | 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 | - | 文本框值。支持语法糖 `v-model:value`。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
|
||||
default-value | String / Number | - | 文本框值。非受控属性。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/textarea/type.ts) | N
|
||||
|
||||
### Textarea Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
blur | `(context: { value: TextareaValue, cursor: number })` | 失去焦点时触发
|
||||
change | `(context: { value: TextareaValue, cursor: number })` | 输入内容变化时触发
|
||||
enter | `(context: { value: TextareaValue })` | 点击完成时触发
|
||||
focus | `(context: { value: TextareaValue })` | 获得焦点时触发
|
||||
keyboardheightchange | `(context: { height: number, duration: number })` | 键盘高度发生变化的时候触发此事件
|
||||
line-change | `(context: { value: TextareaValue })` | 行高发生变化时触发
|
||||
|
||||
### Textarea Slots
|
||||
|
||||
名称 | 描述
|
||||
-- | --
|
||||
label | 自定义 `label` 显示内容
|
||||
|
||||
### 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 | @component-border | -
|
||||
--td-textarea-border-radius | @radius-default | -
|
||||
--td-textarea-disabled-text-color | @text-color-disabled | -
|
||||
--td-textarea-indicator-text-color | @text-color-placeholder | -
|
||||
--td-textarea-label-color | @text-color-primary | -
|
||||
--td-textarea-padding | 32rpx | -
|
||||
--td-textarea-placeholder-color | @text-color-placeholder | -
|
||||
--td-textarea-text-color | @text-color-primary | -
|
||||
14
uni_modules/tdesign-uniapp/components/textarea/computed.js
Normal file
14
uni_modules/tdesign-uniapp/components/textarea/computed.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import utils from '../common/utils.wxs';
|
||||
|
||||
|
||||
export function textareaStyle(autosize) {
|
||||
if (autosize && typeof autosize === 'object') {
|
||||
return utils._style({
|
||||
'min-height': utils.addUnit(autosize.minHeight),
|
||||
'max-height': utils.addUnit(autosize.maxHeight),
|
||||
});
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
152
uni_modules/tdesign-uniapp/components/textarea/props.ts
Normal file
152
uni_modules/tdesign-uniapp/components/textarea/props.ts
Normal file
@@ -0,0 +1,152 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdTextareaProps } from './type';
|
||||
export default {
|
||||
/** 键盘弹起时,是否自动上推页面 */
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入 */
|
||||
allowInputOverMax: Boolean,
|
||||
/** 自动聚焦,拉起键盘 */
|
||||
autofocus: Boolean,
|
||||
/** 是否自动增高,值为 true 时,style.height 不生效。支持传入对象,如 { maxHeight: 120, minHeight: 20 } */
|
||||
autosize: {
|
||||
type: [Boolean, Object],
|
||||
default: false as TdTextareaProps['autosize'],
|
||||
},
|
||||
/** 是否显示外边框 */
|
||||
bordered: Boolean,
|
||||
/** 点击键盘右下角按钮时是否保持键盘不收起点 */
|
||||
confirmHold: Boolean,
|
||||
/** 设置键盘右下角按钮的文字,仅在 type='text'时生效 */
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'return' as TdTextareaProps['confirmType'],
|
||||
validator(val: TdTextareaProps['confirmType']): boolean {
|
||||
if (!val) return true;
|
||||
return ['return', 'send', 'search', 'next', 'go', 'done'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 指定 focus 时的光标位置 */
|
||||
cursor: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 【试验性】光标颜色,仅在 Skyline 下有效 */
|
||||
cursorColor: {
|
||||
type: String,
|
||||
default: '#0052d9',
|
||||
},
|
||||
/** 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 */
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/** 是否去掉 iOS 下的默认内边距 */
|
||||
disableDefaultPadding: Boolean,
|
||||
/** 是否禁用文本框 */
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 如果 textarea 是在一个 `position:fixed` 的区域,需要显式指定属性 fixed 为 true */
|
||||
fixed: Boolean,
|
||||
/** 自动聚焦 */
|
||||
focus: Boolean,
|
||||
/** focus时,点击页面的时候不收起键盘 */
|
||||
holdKeyboard: Boolean,
|
||||
/** 显示文本计数器,如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时, indicator无效 */
|
||||
indicator: Boolean,
|
||||
/** 左侧文本 */
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
/** 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 */
|
||||
maxcharacter: {
|
||||
type: Number,
|
||||
},
|
||||
/** 用户最多可以输入的字符个数,值为 -1 的时候不限制最大长度 */
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 占位符 */
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/** 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight */
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: 'textarea-placeholder',
|
||||
},
|
||||
/** 指定 placeholder 的样式,目前仅支持 color ,font-size和font-weight */
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 只读状态 */
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 */
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 */
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
/** 是否显示键盘上方带有”完成“按钮那一栏 */
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 文本框值 */
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
/** 文本框值,非受控属性 */
|
||||
defaultValue: {
|
||||
type: [String, Number],
|
||||
},
|
||||
/** 失去焦点时触发 */
|
||||
onBlur: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 输入内容变化时触发 */
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 点击完成时触发 */
|
||||
onEnter: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 获得焦点时触发 */
|
||||
onFocus: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 键盘高度发生变化的时候触发此事件 */
|
||||
onKeyboardheightchange: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 行高发生变化时触发 */
|
||||
onLineChange: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
};
|
||||
67
uni_modules/tdesign-uniapp/components/textarea/textarea.css
Normal file
67
uni_modules/tdesign-uniapp/components/textarea/textarea.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.t-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: var(--td-textarea-padding, 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: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
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;
|
||||
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: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
color: var(--td-textarea-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.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: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
}
|
||||
.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: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
text-align: right;
|
||||
padding-top: var(--td-spacer, 16rpx);
|
||||
}
|
||||
.t-textarea--border {
|
||||
border-radius: var(--td-textarea-border-radius, var(--td-radius-default, 12rpx));
|
||||
position: relative;
|
||||
}
|
||||
.t-textarea--border::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2rpx solid var(--td-textarea-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.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))));
|
||||
}
|
||||
227
uni_modules/tdesign-uniapp/components/textarea/textarea.vue
Normal file
227
uni_modules/tdesign-uniapp/components/textarea/textarea.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="classPrefix + ' ' + (bordered ? classPrefix + '--border' : '') + ' ' + tClass"
|
||||
>
|
||||
<view :class="classPrefix + '__label ' + tClassLabel">
|
||||
<block v-if="label">
|
||||
{{ label }}
|
||||
</block>
|
||||
<slot name="label" />
|
||||
</view>
|
||||
<view :class="classPrefix + '__wrapper'">
|
||||
<textarea
|
||||
:class="classPrefix + '__wrapper-inner ' + (disabled ? prefix + '-is-disabled' : '') + ' ' + tClassTextarea"
|
||||
:style="textareaStyle(autosize)"
|
||||
:maxlength="allowInputOverMax ? -1 : maxlength"
|
||||
:disabled="disabled || readonly"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-class="classPrefix + '__placeholder ' + placeholderClass"
|
||||
:placeholder-style="placeholderStyle"
|
||||
:value="dataValue"
|
||||
: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"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@confirm="onConfirm"
|
||||
@linechange="onLineChange"
|
||||
@keyboardheightchange="onKeyboardHeightChange"
|
||||
/>
|
||||
<view
|
||||
v-if="indicator && (maxcharacter > 0 || maxlength > 0)"
|
||||
:class="classPrefix + '__indicator ' + tClassIndicator"
|
||||
>
|
||||
{{ count }} / {{ maxcharacter || maxlength }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getCharacterLength, coalesce, nextTick } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { textareaStyle } from './computed.js';
|
||||
// import { getInnerMaxLen } from '../input/utils';
|
||||
import { RELATION_MAP } from '../common/relation/parent-map.js';
|
||||
|
||||
|
||||
const name = `${prefix}-textarea`;
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-textarea`,
|
||||
`${prefix}-class-label`,
|
||||
`${prefix}-class-indicator`,
|
||||
],
|
||||
inject: {
|
||||
[RELATION_MAP.FormKey]: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
|
||||
emits: [
|
||||
'update:value',
|
||||
],
|
||||
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
count: 0,
|
||||
tools,
|
||||
|
||||
dataValue: coalesce(this.value, this.defaultValue, ''),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.updateValue(val);
|
||||
|
||||
if (this[RELATION_MAP.FormKey]
|
||||
&& this[RELATION_MAP.FormKey].onValueChange) {
|
||||
this[RELATION_MAP.FormKey].onValueChange(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { value, defaultValue } = this;
|
||||
this.updateValue(coalesce(value, defaultValue, ''));
|
||||
},
|
||||
methods: {
|
||||
textareaStyle,
|
||||
updateCount(val) {
|
||||
const { maxcharacter, maxlength } = this;
|
||||
const { count } = this.calculateValue(val, maxcharacter, maxlength);
|
||||
this.count = count;
|
||||
},
|
||||
|
||||
updateValue(val) {
|
||||
const { maxcharacter, maxlength } = this;
|
||||
const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
|
||||
|
||||
this.dataValue = val;
|
||||
|
||||
|
||||
nextTick().then(() => {
|
||||
this.dataValue = value;
|
||||
this.count = count;
|
||||
});
|
||||
// this.updateInnerMaxLen();
|
||||
},
|
||||
|
||||
calculateValue(value, maxcharacter, maxlength) {
|
||||
const { allowInputOverMax } = this;
|
||||
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.emitChange({ value: this.dataValue, cursor });
|
||||
},
|
||||
|
||||
emitChange(data) {
|
||||
this.$emit('change', data);
|
||||
this.$emit('update:value', data.value);
|
||||
},
|
||||
|
||||
onFocus(event) {
|
||||
this.$emit('focus', {
|
||||
...event.detail,
|
||||
});
|
||||
},
|
||||
onBlur(event) {
|
||||
this.$emit('blur', {
|
||||
...event.detail,
|
||||
});
|
||||
|
||||
if (this[RELATION_MAP.FormKey]
|
||||
&& this[RELATION_MAP.FormKey].onBlur) {
|
||||
this[RELATION_MAP.FormKey].onBlur(event.detail.value);
|
||||
}
|
||||
},
|
||||
onConfirm(event) {
|
||||
this.$emit('enter', {
|
||||
...event.detail,
|
||||
});
|
||||
},
|
||||
onLineChange(event) {
|
||||
this.$emit('line-change', {
|
||||
...event.detail,
|
||||
});
|
||||
},
|
||||
onKeyboardHeightChange(e) {
|
||||
this.$emit('keyboardheightchange', e.detail);
|
||||
},
|
||||
|
||||
// updateInnerMaxLen() {
|
||||
// this.innerMaxLen = this.getInnerMaxLen();
|
||||
// },
|
||||
// getInnerMaxLen() {
|
||||
// const {
|
||||
// allowInputOverMax,
|
||||
// maxcharacter,
|
||||
// maxlength,
|
||||
// dataValue,
|
||||
// rawValue,
|
||||
// count,
|
||||
// } = this;
|
||||
// return getInnerMaxLen({
|
||||
// allowInputOverMax,
|
||||
// maxcharacter,
|
||||
// maxlength,
|
||||
// dataValue,
|
||||
// rawValue,
|
||||
// count,
|
||||
// });
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './textarea.css';
|
||||
</style>
|
||||
167
uni_modules/tdesign-uniapp/components/textarea/type.ts
Normal file
167
uni_modules/tdesign-uniapp/components/textarea/type.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdTextareaProps {
|
||||
/**
|
||||
* 键盘弹起时,是否自动上推页面
|
||||
* @default true
|
||||
*/
|
||||
adjustPosition?: boolean;
|
||||
/**
|
||||
* 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入
|
||||
* @default false
|
||||
*/
|
||||
allowInputOverMax?: boolean;
|
||||
/**
|
||||
* 自动聚焦,拉起键盘
|
||||
* @default false
|
||||
*/
|
||||
autofocus?: boolean;
|
||||
/**
|
||||
* 是否自动增高,值为 true 时,style.height 不生效。支持传入对象,如 { maxHeight: 120, minHeight: 20 }
|
||||
* @default false
|
||||
*/
|
||||
autosize?: boolean | { maxHeight?: number; minHeight?: number };
|
||||
/**
|
||||
* 是否显示外边框
|
||||
* @default false
|
||||
*/
|
||||
bordered?: boolean;
|
||||
/**
|
||||
* 点击键盘右下角按钮时是否保持键盘不收起点
|
||||
* @default false
|
||||
*/
|
||||
confirmHold?: boolean;
|
||||
/**
|
||||
* 设置键盘右下角按钮的文字,仅在 type='text'时生效
|
||||
* @default return
|
||||
*/
|
||||
confirmType?: 'return' | 'send' | 'search' | 'next' | 'go' | 'done';
|
||||
/**
|
||||
* 指定 focus 时的光标位置
|
||||
* @default -1
|
||||
*/
|
||||
cursor?: number;
|
||||
/**
|
||||
* 【试验性】光标颜色,仅在 Skyline 下有效
|
||||
* @default #0052d9
|
||||
*/
|
||||
cursorColor?: string;
|
||||
/**
|
||||
* 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
|
||||
* @default 0
|
||||
*/
|
||||
cursorSpacing?: number;
|
||||
/**
|
||||
* 是否去掉 iOS 下的默认内边距
|
||||
* @default false
|
||||
*/
|
||||
disableDefaultPadding?: boolean;
|
||||
/**
|
||||
* 是否禁用文本框
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 如果 textarea 是在一个 `position:fixed` 的区域,需要显式指定属性 fixed 为 true
|
||||
* @default false
|
||||
*/
|
||||
fixed?: boolean;
|
||||
/**
|
||||
* 自动聚焦
|
||||
* @default false
|
||||
*/
|
||||
focus?: boolean;
|
||||
/**
|
||||
* focus时,点击页面的时候不收起键盘
|
||||
* @default false
|
||||
*/
|
||||
holdKeyboard?: boolean;
|
||||
/**
|
||||
* 显示文本计数器,如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时, indicator无效
|
||||
* @default false
|
||||
*/
|
||||
indicator?: boolean;
|
||||
/**
|
||||
* 左侧文本
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度
|
||||
*/
|
||||
maxcharacter?: number;
|
||||
/**
|
||||
* 用户最多可以输入的字符个数,值为 -1 的时候不限制最大长度
|
||||
* @default -1
|
||||
*/
|
||||
maxlength?: number;
|
||||
/**
|
||||
* 占位符
|
||||
*/
|
||||
placeholder?: string;
|
||||
/**
|
||||
* 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight
|
||||
* @default textarea-placeholder
|
||||
*/
|
||||
placeholderClass?: string;
|
||||
/**
|
||||
* 指定 placeholder 的样式,目前仅支持 color ,font-size和font-weight
|
||||
* @default ''
|
||||
*/
|
||||
placeholderStyle?: string;
|
||||
/**
|
||||
* 只读状态
|
||||
*/
|
||||
readonly?: boolean;
|
||||
/**
|
||||
* 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用
|
||||
* @default -1
|
||||
*/
|
||||
selectionEnd?: number;
|
||||
/**
|
||||
* 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用
|
||||
* @default -1
|
||||
*/
|
||||
selectionStart?: number;
|
||||
/**
|
||||
* 是否显示键盘上方带有”完成“按钮那一栏
|
||||
* @default true
|
||||
*/
|
||||
showConfirmBar?: boolean;
|
||||
/**
|
||||
* 文本框值
|
||||
*/
|
||||
value?: TextareaValue;
|
||||
/**
|
||||
* 文本框值,非受控属性
|
||||
*/
|
||||
defaultValue?: TextareaValue;
|
||||
/**
|
||||
* 失去焦点时触发
|
||||
*/
|
||||
onBlur?: (context: { value: TextareaValue; cursor: number }) => void;
|
||||
/**
|
||||
* 输入内容变化时触发
|
||||
*/
|
||||
onChange?: (context: { value: TextareaValue; cursor: number }) => void;
|
||||
/**
|
||||
* 点击完成时触发
|
||||
*/
|
||||
onEnter?: (context: { value: TextareaValue }) => void;
|
||||
/**
|
||||
* 获得焦点时触发
|
||||
*/
|
||||
onFocus?: (context: { value: TextareaValue }) => void;
|
||||
/**
|
||||
* 键盘高度发生变化的时候触发此事件
|
||||
*/
|
||||
onKeyboardheightchange?: (context: { height: number; duration: number }) => void;
|
||||
/**
|
||||
* 行高发生变化时触发
|
||||
*/
|
||||
onLineChange?: (context: { value: TextareaValue }) => void;
|
||||
}
|
||||
|
||||
export type TextareaValue = string | number;
|
||||
Reference in New Issue
Block a user