feat(input): 增加左侧、右侧文本

增加左侧、右侧文本 #81
Tencent · Dec 28, 2021 · c1f0795 · c1f0795
1 parent a0a62e4
commit c1f0795
Show file tree

Hide file tree

Showing 21 changed files with 328 additions and 344 deletions.
diff --git a/examples/input/demos/base.vue b/examples/input/demos/base.vue
@@ -3,6 +3,7 @@
     <t-input />
 
     <t-input v-model="input" placeholder="请输入内容（有默认值）" @enter="onEnter" @change="onChange" />
+    <t-input label="价格：" suffix="元" />
   </div>
 </template>
 <script>

diff --git a/examples/input/input.md b/examples/input/input.md
@@ -5,7 +5,6 @@
 :::
 
 ## API
-
 ### Input Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -14,15 +13,17 @@ autocomplete | Boolean | false | 是否开启自动填充功能 | N
 autofocus | Boolean | false | 自动聚焦 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | false | 是否禁用输入框 | N
-maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
-maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度 | N
+label | String / Slot / Function | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 name | String | - | 名称 | N
-placeholder | String | - | 占位符 | N
+placeholder | String | undefined | 占位符 | N
 prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 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/_common b/src/_common
diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -9,6 +9,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`;
 
@@ -47,7 +48,7 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
         disabled: this.disabled,
         readonly: this.readonly,
         autocomplete: this.autocomplete,
-        placeholder: this.placeholder || this.t(this.global.placeholder),
+        placeholder: this.placeholder ?? this.t(this.global.placeholder),
         maxlength: this.maxlength,
         name: this.name || undefined,
         type: this.renderType,
@@ -87,6 +88,12 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
     const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon');
     let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon');
 
+    const label = renderTNodeJSX(this, 'label');
+    const suffix = renderTNodeJSX(this, 'suffix');
+
+    const labelContent = label ? <div class={`${name}__prefix`}>{label}</div> : null;
+    const suffixContent = suffix ? <div class={`${name}__suffix`}>{suffix}</div> : null;
+
     if (this.showClear) {
       suffixIcon = <ClearIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitClear} />;
     }
@@ -102,12 +109,14 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
     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--focused`]: this.focused,
       },
     ];
     return (
@@ -117,17 +126,20 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
         onMouseleave={() => this.mouseEvent(false)}
         {...{ attrs: wrapperAttrs, on: wrapperEvents }}
       >
-        {prefixIcon ? <span class={`${name}__prefix`}>{prefixIcon}</span> : null}
+        {prefixIcon ? <span class={[`${name}__prefix`, `${name}__prefix-icon`]}>{prefixIcon}</span> : null}
+        {labelContent}
         <input
           {...{ attrs: this.inputAttrs, on: inputEvents }}
           ref="refInputElem"
           value={this.value}
-          class={`${name}__inner`}
           onInput={this.handleInput}
           onCompositionend={this.onCompositionend}
         />
+        {suffixContent}
         {suffixIcon ? (
-          <span class={[`${name}__suffix`, { [`${name}__clear`]: this.showClear }]}>{suffixIcon}</span>
+          <span class={[`${name}__suffix`, `${name}__suffix-icon`, { [`${name}__clear`]: this.showClear }]}>
+            {suffixIcon}
+          </span>
         ) : null}
       </div>
     );

diff --git 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-28 11:39:46
  * */
 
 import { TdInputProps } from './type';
@@ -17,11 +17,15 @@ export default {
   clearable: Boolean,
   /** 是否禁用输入框 */
   disabled: Boolean,
-  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
+  /** 左侧文本 */
+  label: {
+    type: [String, Function] as PropType<TdInputProps['label']>,
+  },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
   maxcharacter: {
     type: Number,
   },
-  /** 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度 */
+  /** 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
   maxlength: {
     type: Number,
   },
@@ -33,7 +37,7 @@ export default {
   /** 占位符 */
   placeholder: {
     type: String,
-    default: '',
+    default: undefined,
   },
   /** 组件前置图标 */
   prefixIcon: {
@@ -57,9 +61,13 @@ export default {
       return ['success', 'warning', 'error'].includes(val);
     },
   },
+  /** 后置图标前的后置内容 */
+  suffix: {
+    type: [String, Function] as PropType<TdInputProps['suffix']>,
+  },
   /** 组件后置图标 */
   suffixIcon: {
-    type: [String, Function] as PropType<TdInputProps['suffixIcon']>,
+    type: Function as PropType<TdInputProps['suffixIcon']>,
   },
   /** 输入框类型 */
   type: {

diff --git 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-28 11:39:46
  * */
 
 import { TNode, SizeEnum } from '../common';
@@ -29,11 +29,15 @@ export interface TdInputProps {
    */
   disabled?: boolean;
   /**
-   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度
+   * 左侧文本
+   */
+  label?: string | TNode;
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
    */
   maxcharacter?: number;
   /**
-   * 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度
+   * 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
    */
   maxlength?: number;
   /**
@@ -43,7 +47,6 @@ export interface TdInputProps {
   name?: string;
   /**
    * 占位符
-   * @default ''
    */
   placeholder?: string;
   /**
@@ -64,10 +67,14 @@ export interface TdInputProps {
    * 输入框状态
    */
   status?: 'success' | 'warning' | 'error';
+  /**
+   * 后置图标前的后置内容
+   */
+  suffix?: string | TNode;
   /**
    * 组件后置图标
    */
-  suffixIcon?: string | TNode;
+  suffixIcon?: TNode;
   /**
    * 输入框类型
    * @default text
@@ -113,6 +120,6 @@ export interface TdInputProps {
    * 释放键盘时触发
    */
   onKeyup?: (value: InputValue, context: { e: KeyboardEvent }) => void;
-};
+}
 
 export type InputValue = string | number;
+38 −0		docs/mobile/_design/gen-design-docs.js
+68 −0		docs/mobile/api/button.md
+1 −1		style/mobile/components/badge/_index.less
+0 −96		style/mobile/components/badge/index.html
+0 −91		style/mobile/components/button-group/index.html
+0 −78		style/mobile/components/button/index.html
+7 −15		style/mobile/components/cell-group/_index.less
+5 −5		style/mobile/components/cell-group/_var.less
+0 −95		style/mobile/components/notice-bar/index.html
+1 −1		style/mobile/components/slider/_index.less
+0 −99		style/mobile/components/stepper/index.html
+0 −99		style/mobile/components/steps/index.html
+0 −110		style/mobile/components/tabs/index.html
+1 −1		style/web/components/date-picker/_index.less
+5 −2		style/web/components/input/_index.less
+13 −0		style/web/components/input/_mixin.less
+2 −3		style/web/components/select/_index.less