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

增加左侧、右侧文本 Tencent#81
mokywu · Dec 24, 2021 · b5a81ee · b5a81ee
1 parent b565cfe
commit b5a81ee
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 416 deletions.
diff --git 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
@@ -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<InputInstance>).extend({
     const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon');
     let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon');
 
+    const labelContent = this.label ? <span class={`${name}__prefix`}>{renderTNodeJSX(this, 'label')}</span> : null;
+    const suffixContent = this.suffix ? <span class={`${name}__suffix`}>{renderTNodeJSX(this, 'suffix')}</span> : null;
+
     if (this.showClear) {
       suffixIcon = <ClearIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitClear} />;
     }
@@ -100,12 +104,14 @@ export default (Vue as VueConstructor<InputInstance>).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<InputInstance>).extend({
         {...{ attrs: wrapperAttrs, on: wrapperEvents }}
       >
         {prefixIcon ? <span class={`${name}__prefix`}>{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>
         ) : null}

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-24 16:29:04
  * */
 
 import { TdInputProps } from './type';
@@ -17,6 +17,10 @@ export default {
   clearable: Boolean,
   /** 是否禁用输入框 */
   disabled: Boolean,
+  /** 左侧文本 */
+  label: {
+    type: [String, Function] as PropType<TdInputProps['label']>,
+  },
   /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
   maxcharacter: {
     type: Number,
@@ -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-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
diff --git a/test/unit/date-picker/__snapshots__/demo.test.js.snap b/test/unit/date-picker/__snapshots__/demo.test.js.snap
@@ -720,10 +720,9 @@ exports[`DatePicker base demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -2174,10 +2173,9 @@ exports[`DatePicker datePresets demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -3640,10 +3638,9 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input--suffix"
+            class="t-input t-size-m t-input__inner t-input--suffix"
           >
             <input
-              class="t-input__inner"
               placeholder="请选择日期"
               readonly="readonly"
               type="text"
@@ -4410,10 +4407,9 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input--suffix"
+            class="t-input t-size-m t-input__inner t-input--suffix"
           >
             <input
-              class="t-input__inner"
               placeholder="请选择日期"
               readonly="readonly"
               type="text"
@@ -5875,10 +5871,9 @@ exports[`DatePicker datePresetsTime demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -7314,10 +7309,9 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="开始时间 至 结束时间"
             readonly="readonly"
             type="text"
@@ -8786,10 +8780,9 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -9111,10 +9104,9 @@ exports[`DatePicker month demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择月份"
             readonly="readonly"
             type="text"
@@ -9404,10 +9396,9 @@ exports[`DatePicker year demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-input__inner t-input--suffix"
         >
           <input
-            class="t-input__inner"
             placeholder="请选择年份"
             readonly="readonly"
             type="text"

diff --git a/test/unit/date-picker/__snapshots__/index.test.js.snap b/test/unit/date-picker/__snapshots__/index.test.js.snap
@@ -57,7 +57,7 @@ exports[`DatePicker :mode 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" class="t-input__inner"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
@@ -179,7 +179,7 @@ exports[`DatePicker :range 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
@@ -248,7 +248,7 @@ exports[`DatePicker :value 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>

diff --git a/test/unit/drawer/__snapshots__/demo.test.js.snap b/test/unit/drawer/__snapshots__/demo.test.js.snap
@@ -957,10 +957,9 @@ exports[`Drawer Demo operation wroks fine 1`] = `
           </span>
            
           <div
-            class="t-input t-size-m"
+            class="t-input t-size-m t-input__inner"
           >
             <input
-              class="t-input__inner"
               placeholder="请输入"
               type="text"
             />
@@ -975,10 +974,9 @@ exports[`Drawer Demo operation wroks fine 1`] = `
           </span>
            
           <div
-            class="t-input t-size-m"
+            class="t-input t-size-m t-input__inner"
           >
             <input
-              class="t-input__inner"
               placeholder="请输入"
               type="text"
             />
@@ -993,10 +991,9 @@ exports[`Drawer Demo operation wroks fine 1`] = `
           </span>
            
           <div
-            class="t-input t-size-m"
+            class="t-input t-size-m t-input__inner"
           >
             <input
-              class="t-input__inner"
               placeholder="请输入"
               type="text"
             />

diff --git a/test/unit/form/__snapshots__/demo.test.js.snap b/test/unit/form/__snapshots__/demo.test.js.snap
@@ -26,10 +26,9 @@ exports[`Form base demo works fine 1`] = `
           class="t-form__controls-content"
         >
           <div
-            class="t-input t-size-m"
+            class="t-input t-size-m t-input__inner"
           >
             <input
-              class="t-input__inner"
               placeholder="请输入内容"
               type="text"
             />
@@ -59,10 +58,9 @@ exports[`Form base demo works fine 1`] = `
           class="t-form__controls-content"
         >
           <div
-            class="t-input t-size-m"
+            class="t-input t-size-m t-input__inner"
           >
             <input
-              class="t-input__inner"
               placeholder="请输入内容"
               type="text"
             />