Merge pull request #519 from jchalex/feature/input-number/status

feat(input-number): 增加状态设置与提示设置功能
Tencent · Mar 10, 2022 · 49fcf08 · 49fcf08
2 parents eb3ac12 + bc3551f
commit 49fcf08
Show file tree

Hide file tree

Showing 10 changed files with 414 additions and 48 deletions.
diff --git a/examples/input-number/demos/status.vue b/examples/input-number/demos/status.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <t-form>
+      <t-form-item label="禁用">
+        <t-input-number v-model="value0" disabled></t-input-number>
+      </t-form-item>
+      <t-form-item label="只读">
+        <t-input-number v-model="value1" readonly></t-input-number>
+      </t-form-item>
+      <t-form-item label="正常">
+        <t-input-number v-model="value2"></t-input-number>
+      </t-form-item>
+      <t-form-item label="成功">
+        <t-input-number v-model="value3" status="success"></t-input-number>
+      </t-form-item>
+      <t-form-item label="警告">
+        <t-input-number v-model="value4" status="warning"></t-input-number>
+      </t-form-item>
+      <t-form-item label="错误">
+        <t-input-number v-model="value5" status="error"></t-input-number>
+      </t-form-item>
+      <t-form-item label="正常提示">
+        <t-input-number v-model="value6" tips="这是普通文本提示"></t-input-number>
+      </t-form-item>
+      <t-form-item label="成功提示">
+        <t-input-number v-model="value7" status="success" tips="校验通过文本提示"></t-input-number>
+      </t-form-item>
+      <t-form-item label="警告提示">
+        <t-input-number v-model="value8" status="warning" tips="校验不通过文本提示"></t-input-number>
+      </t-form-item>
+      <t-form-item label="错误提示">
+        <t-input-number v-model="value9" status="error" tips="校验存在严重问题文本提示"></t-input-number>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value0: 3,
+      value1: 3,
+      value2: 3,
+      value3: 3,
+      value4: 3,
+      value5: 3,
+      value6: 3,
+      value7: 3,
+      value8: 3,
+      value9: 3,
+    };
+  },
+};
+</script>
+<style scoped>
+.t-form__item {
+  margin-bottom: 0px;
+}
+
+.t-input-number {
+  width: 300px;
+  margin-bottom: 0px;
+}
+</style>
diff --git a/examples/input-number/input-number.md b/examples/input-number/input-number.md
@@ -6,12 +6,14 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 align | String | - | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
+autoWidth | Boolean | false | 【开发中】宽度随内容自适应 | N
 decimalPlaces | Number | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place) | N
 disabled | Boolean | false | 禁用组件 | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`(value: number) => number | string` | N
 max | Number | Infinity | 最大值 | N
 min | Number | -Infinity | 最小值 | N
 placeholder | String | undefined | 占位符 | N
+readonly | Boolean | false | 只读状态 | N
 size | String | medium | 组件尺寸。可选项：small/medium/large | N
 status | String | - | 文本框状态。可选项：success/warning/error | N
 step | Number | 1 | 数值改变步数，可以是小数 | N

diff --git a/src/input-number/input-number.tsx b/src/input-number/input-number.tsx
@@ -9,8 +9,10 @@ import CLASSNAMES from '../utils/classnames';
 import props from './props';
 import { ChangeSource, TdInputNumberProps } from './type';
 import { ClassName, TNodeReturnValue } from '../common';
+import { renderTNodeJSX } from '../utils/render-tnode';
 
 const name = `${prefix}-input-number`;
+const INPUT_NUMBER_TIPS_CLASS = `${prefix}-input-number__tips`;
 
 type InputNumberEvent = {
   on: {
@@ -29,10 +31,11 @@ type ChangeContextEvent = InputEvent | MouseEvent | FocusEvent;
 type InputNumberAttr = {
   attrs: {
     disabled?: boolean;
-    readonly?: any;
+    readonly?: boolean;
     autocomplete?: string;
     ref: string;
     placeholder: string;
+    unselectable?: string;
   };
 };
 
@@ -140,6 +143,7 @@ export default Vue.extend({
           `${prefix}-input`,
           {
             [`${prefix}-is-error`]: this.isError,
+            [`${prefix}-is-${this.status}`]: this.status,
             [`${prefix}-align-${this.align}`]: this.align,
           },
         ],
@@ -151,6 +155,7 @@ export default Vue.extend({
           `${prefix}-input__inner`,
           {
             [CLASSNAMES.STATUS.disabled]: this.tDisabled,
+            [`${prefix}-is-readonly`]: this.readonly,
             [`${name}-text-align`]: this.theme === 'row',
           },
         ],
@@ -172,9 +177,11 @@ export default Vue.extend({
       return {
         attrs: {
           disabled: this.tDisabled,
+          readonly: this.readonly,
           autocomplete: 'off',
           ref: 'refInputElem',
           placeholder: this.placeholder,
+          unselectable: this.readonly ? 'on' : 'off',
         },
       };
     },
@@ -367,6 +374,7 @@ export default Vue.extend({
     },
   },
   render(): VNode {
+    const tips = renderTNodeJSX(this, 'tips');
     return (
       <div {...this.cmptWrapClasses}>
         {this.theme !== 'normal' && (
@@ -393,6 +401,7 @@ export default Vue.extend({
             icon={this.increaseIcon}
           />
         )}
+        <div class={`${INPUT_NUMBER_TIPS_CLASS} ${prefix}-input-number__tips--${this.status || 'normal'}`}>{tips}</div>
       </div>
     );
   },

diff --git a/src/input-number/props.ts b/src/input-number/props.ts
@@ -12,9 +12,12 @@ export default {
   align: {
     type: String as PropType<TdInputNumberProps['align']>,
     validator(val: TdInputNumberProps['align']): boolean {
+      if (!val) return true;
       return ['left', 'center', 'right'].includes(val);
     },
   },
+  /** 【开发中】宽度随内容自适应 */
+  autoWidth: Boolean,
   /** [小数位数](https://en.wiktionary.org/wiki/decimal_place) */
   decimalPlaces: {
     type: Number,
@@ -41,18 +44,22 @@ export default {
     type: String,
     default: undefined,
   },
+  /** 只读状态 */
+  readonly: Boolean,
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdInputNumberProps['size']>,
     default: 'medium' as TdInputNumberProps['size'],
     validator(val: TdInputNumberProps['size']): boolean {
+      if (!val) return true;
       return ['small', 'medium', 'large'].includes(val);
     },
   },
   /** 文本框状态 */
   status: {
     type: String as PropType<TdInputNumberProps['status']>,
     validator(val: TdInputNumberProps['status']): boolean {
+      if (!val) return true;
       return ['success', 'warning', 'error'].includes(val);
     },
   },
@@ -66,6 +73,7 @@ export default {
     type: String as PropType<TdInputNumberProps['theme']>,
     default: 'row' as TdInputNumberProps['theme'],
     validator(val: TdInputNumberProps['theme']): boolean {
+      if (!val) return true;
       return ['column', 'row', 'normal'].includes(val);
     },
   },

diff --git a/src/input-number/type.ts b/src/input-number/type.ts
@@ -11,6 +11,11 @@ export interface TdInputNumberProps {
    * 文本内容位置，居左/居中/居右
    */
   align?: 'left' | 'center' | 'right';
+  /**
+   * 【开发中】宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
   /**
    * [小数位数](https://en.wiktionary.org/wiki/decimal_place)
    */
@@ -38,6 +43,11 @@ export interface TdInputNumberProps {
    * 占位符
    */
   placeholder?: string;
+  /**
+   * 只读状态
+   * @default false
+   */
+  readonly?: boolean;
   /**
    * 组件尺寸
    * @default medium