diff --git a/examples/input/input.md b/examples/input/input.md index 7a85f2dd4e..b31e2a9f25 100644 --- a/examples/input/input.md +++ b/examples/input/input.md @@ -5,7 +5,6 @@ ::: ## API - ### Input Props 名称 | 类型 | 默认值 | 说明 | 必传 @@ -14,6 +13,7 @@ autocomplete | Boolean | false | 是否开启自动填充功能 | N autofocus | Boolean | false | 自动聚焦 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | false | 是否禁用输入框 | N +label | String / Slot / Function | - | 左侧文本。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 | N maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候,则不限制输入长度 | N name | String | - | 名称 | N @@ -22,7 +22,8 @@ prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[ readonly | Boolean | false | 输入框是否只读 | N size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | undefined | 输入框状态。可选项:success/warning/error | N -suffixIcon | String / Slot / Function | - | 组件后置图标。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N type | String | text | 输入框类型。可选项:text/number/url/tel/password/search/submit/hidden | N value | String / Number | - | 输入框的值。支持语法糖。TS 类型:`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input/type.ts) | N diff --git a/src/input/input.tsx b/src/input/input.tsx index 94f54cab2a..323e916986 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -7,6 +7,7 @@ import CLASSNAMES from '../utils/classnames'; import { emitEvent } from '../utils/event'; import { prefix } from '../config'; import props from './props'; +import { renderTNodeJSX } from '../utils/render-tnode'; const name = `${prefix}-input`; @@ -85,6 +86,9 @@ export default (Vue as VueConstructor).extend({ const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon'); let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon'); + const labelContent = this.label ? {renderTNodeJSX(this, 'label')} : null; + const suffixContent = this.suffix ? {renderTNodeJSX(this, 'suffix')} : null; + if (this.showClear) { suffixIcon = ; } @@ -100,12 +104,14 @@ export default (Vue as VueConstructor).extend({ const classes = [ name, CLASSNAMES.SIZE[this.size] || '', + `${name}__inner`, { [CLASSNAMES.STATUS.disabled]: this.disabled, [CLASSNAMES.STATUS.focused]: this.focused, [`${prefix}-is-${this.status}`]: this.status, - [`${name}--prefix`]: prefixIcon, - [`${name}--suffix`]: suffixIcon, + [`${name}--prefix`]: prefixIcon || labelContent, + [`${name}--suffix`]: suffixIcon || suffixContent, + [`${name}__inner-is-focused`]: this.focused, }, ]; return ( @@ -116,14 +122,15 @@ export default (Vue as VueConstructor).extend({ {...{ attrs: wrapperAttrs, on: wrapperEvents }} > {prefixIcon ? {prefixIcon} : null} + {labelContent} + {suffixContent} {suffixIcon ? ( {suffixIcon} ) : null} diff --git a/src/input/props.ts b/src/input/props.ts index 95abb0ebcd..7de805b705 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 + * updated at 2021-12-24 16:29:04 * */ import { TdInputProps } from './type'; @@ -17,6 +17,10 @@ export default { clearable: Boolean, /** 是否禁用输入框 */ disabled: Boolean, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 */ maxcharacter: { type: Number, @@ -57,9 +61,13 @@ export default { return ['success', 'warning', 'error'].includes(val); }, }, + /** 后置图标前的后置内容 */ + suffix: { + type: [String, Function] as PropType, + }, /** 组件后置图标 */ suffixIcon: { - type: [String, Function] as PropType, + type: Function as PropType, }, /** 输入框类型 */ type: { diff --git a/src/input/type.ts b/src/input/type.ts index d26d232de9..b35b18e0bc 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 + * updated at 2021-12-24 16:29:04 * */ import { TNode, SizeEnum } from '../common'; @@ -28,6 +28,10 @@ export interface TdInputProps { * @default false */ disabled?: boolean; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 */ @@ -64,10 +68,14 @@ export interface TdInputProps { * 输入框状态 */ status?: 'success' | 'warning' | 'error'; + /** + * 后置图标前的后置内容 + */ + suffix?: string | TNode; /** * 组件后置图标 */ - suffixIcon?: string | TNode; + suffixIcon?: TNode; /** * 输入框类型 * @default text @@ -113,6 +121,6 @@ export interface TdInputProps { * 释放键盘时触发 */ onKeyup?: (value: InputValue, context: { e: KeyboardEvent }) => void; -}; +} export type InputValue = string | number; diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 0e0ef99142..0d065b51a7 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -2984,7 +2984,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -2992,7 +2992,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -3000,7 +3000,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -3008,7 +3008,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -3016,7 +3016,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -3024,7 +3024,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
-
+


@@ -3048,7 +3048,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
-
+
@@ -3056,7 +3056,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
-
+
@@ -3068,7 +3068,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c @@ -3518,7 +3518,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-time.vue co
-
+
@@ -3532,7 +3532,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
-
+
@@ -3542,7 +3542,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
-
+
@@ -3552,7 +3552,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
-
+
@@ -3562,7 +3562,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
-
+
@@ -3572,7 +3572,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
-
+
@@ -3586,7 +3586,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/first-day-of-wee
-
+
@@ -3599,7 +3599,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/month.vue correc
-
+
@@ -3612,7 +3612,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/year.vue correct
-
+
@@ -3878,13 +3878,13 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correct
标签 A -
+
标签 B -
+
标签 C -
+
@@ -4057,7 +4057,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/align.vue correctly 1`]
-
+
@@ -4078,7 +4078,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/base.vue correctly 1`]
-
+
@@ -4086,7 +4086,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/base.vue correctly 1`]
-
+
@@ -4133,7 +4133,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue co
-
+
@@ -4141,7 +4141,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue co
-
+
同一个校验方法可输出不同的错误信息和类型,依次输入:1234 观察变化
@@ -4150,7 +4150,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue co
-
+
在此处体验普通自定义校验方法
@@ -4177,7 +4177,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/layout.vue correctly 1`
-
+
@@ -4185,7 +4185,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/layout.vue correctly 1`
-
+
@@ -4199,14 +4199,14 @@ exports[`ssr snapshot test renders ./examples/form/demos/login.vue correctly 1`]
-
+
@@ -4226,7 +4226,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
这里请填写用户名
@@ -4235,7 +4235,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
这里请填写密码
@@ -4244,7 +4244,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
@@ -4283,7 +4283,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
@@ -4291,7 +4291,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
-
+
@@ -4312,7 +4312,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
这是校验通过后的提示信息
@@ -4321,7 +4321,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4329,7 +4329,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4337,7 +4337,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4345,7 +4345,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4353,7 +4353,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4361,7 +4361,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
@@ -4370,7 +4370,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
-
+
自定义帮助图标
@@ -4941,40 +4941,42 @@ exports[`ssr snapshot test renders ./examples/icon/demos/single.vue correctly 1` exports[`ssr snapshot test renders ./examples/input/demos/addon.vue correctly 1`] = `
-
http:// -
-
-
-
.com -
-
http:// -
.com +
+
+
+
+
请选择 + +
+
+
`; exports[`ssr snapshot test renders ./examples/input/demos/base.vue correctly 1`] = `
-
-
+
+
+
开头
`; exports[`ssr snapshot test renders ./examples/input/demos/clearable.vue correctly 1`] = `
-
+
`; exports[`ssr snapshot test renders ./examples/input/demos/disabled.vue correctly 1`] = `
-
+
`; exports[`ssr snapshot test renders ./examples/input/demos/focus.vue correctly 1`] = `
-
+
`; @@ -4982,28 +4984,28 @@ exports[`ssr snapshot test renders ./examples/input/demos/group.vue correctly 1`
-
-
+
+
-
-
+
+
-
-
+
+
-
 -  -
-
-
+
 -  +
+
+
@@ -5011,24 +5013,24 @@ exports[`ssr snapshot test renders ./examples/input/demos/group.vue correctly 1` exports[`ssr snapshot test renders ./examples/input/demos/password.vue correctly 1`] = `
-
-
+
+
`; exports[`ssr snapshot test renders ./examples/input/demos/size.vue correctly 1`] = `
-
-
-
+
+
+
`; exports[`ssr snapshot test renders ./examples/input/demos/status.vue correctly 1`] = `
-
-
-
+
+
+
`; @@ -6815,8 +6817,8 @@ exports[`ssr snapshot test renders ./examples/message/demos/loading.vue correctl exports[`ssr snapshot test renders ./examples/message/demos/placement.vue correctly 1`] = `
-
-
+
+
@@ -7081,8 +7083,8 @@ exports[`ssr snapshot test renders ./examples/notification/demos/operation.vue c exports[`ssr snapshot test renders ./examples/notification/demos/placement.vue correctly 1`] = `
-
-
+
+


`; @@ -7781,7 +7783,7 @@ exports[`ssr snapshot test renders ./examples/popup/demos/trigger.vue correctly
-
+
@@ -8487,7 +8489,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/creatable.vue correct
-
+
@@ -8573,7 +8575,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/filterable.vue correc
-
+
@@ -8583,7 +8585,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/filterable.vue correc
-
+
@@ -8755,7 +8757,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/remote-search.vue cor
-
+
@@ -8765,7 +8767,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/remote-search.vue cor
-
+
@@ -13065,14 +13067,14 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/base.vue correct
-
+
::
-
+
::
@@ -13085,7 +13087,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/clearable.vue co
-
+
::
@@ -13093,7 +13095,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/clearable.vue co
-
+
::
@@ -13105,7 +13107,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/disabled.vue cor
-
+
::
@@ -13117,7 +13119,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/format.vue corre
-
+
::
@@ -13130,7 +13132,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hide-clear-butto
-
+
::
@@ -13138,7 +13140,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hide-clear-butto
-
+
请选择时间
@@ -13150,7 +13152,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hm.vue correctly
-
+
请选择时间
@@ -13162,7 +13164,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hms.vue correctl
-
+
::
@@ -13175,7 +13177,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/keyboard.vue cor
-
+
::
@@ -13183,7 +13185,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/keyboard.vue cor
-
+
::
@@ -13195,7 +13197,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/range.vue correc
-
+
::-::
@@ -13207,7 +13209,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/show-steps.vue c
-
+
请选择时间
@@ -13219,7 +13221,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/step.vue correct
-
+
::
@@ -13231,7 +13233,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/twelve-hour.vue
-
+
::
@@ -13243,7 +13245,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/twelve-hour-meri
-
+
::
@@ -13346,7 +13348,7 @@ exports[`ssr snapshot test renders ./examples/tooltip/demos/trigger.vue correctl
-
+
@@ -13632,7 +13634,7 @@ exports[`ssr snapshot test renders ./examples/transfer/demos/search.vue correctl