feat(input-number): add readonly prop (#1200)

Co-authored-by: unknown <liyang@xiaoyouzi.com>
tusen-ai · Sep 18, 2021 · f5ef4ce · f5ef4ce
1 parent fd4c51a
commit f5ef4ce
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -3,6 +3,7 @@
 ### Feats
 
 - `n-menu` add `accordion` prop , closes [#917](https://github.com/TuSimple/naive-ui/issues/917).
+
 ## Pending
 
 ### Breaking Changes
@@ -12,6 +13,7 @@
 ### Feats
 
 - `n-layout-sider` add `collapsed-trigger-style` prop.
+- `n-input-number` add `readonly` prop , closes [#1198](https://github.com/TuSimple/naive-ui/issues/1198).
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -3,6 +3,7 @@
 ### Feats
 
 - `n-menu` 添加 `accordion` 属性，关闭 [#917](https://github.com/TuSimple/naive-ui/issues/917)
+
 ## Pending
 
 ### Breaking Changes
@@ -12,6 +13,7 @@
 ### Feats
 
 - `n-layout-sider` 新增 `collapsed-trigger-style` 属性
+- `n-input-number` 新增 `readonly` 属性，关闭 [#1198](https://github.com/TuSimple/naive-ui/issues/1198)
 
 ### Fixes
 
@@ -1432,4 +1434,4 @@
 
 ### Feats
 
-- `n-data-table` 增加了 empty 插槽 [#86](https://github.com/TuSimple/naive-ui/issues/86)
+- `n-data-table` 增加了 empty 插槽 [#86](https://github.com/TuSimple/naive-ui/issues/86)
diff --git a/src/input-number/src/InputNumber.tsx b/src/input-number/src/InputNumber.tsx
@@ -42,6 +42,7 @@ const inputNumberProps = {
     type: Boolean,
     default: true
   },
+  readonly: Boolean,
   clearable: Boolean,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
@@ -95,10 +96,12 @@ export default defineComponent({
     )
     const displayedValueRef = ref('')
     const getMaxPrecision = (currentValue: number): number => {
-      const precisions = [props.min, props.max, props.step, currentValue].map((item) => {
-        const fraction = String(item).split('.')[1]
-        return fraction ? fraction.length : 0
-      })
+      const precisions = [props.min, props.max, props.step, currentValue].map(
+        (item) => {
+          const fraction = String(item).split('.')[1]
+          return fraction ? fraction.length : 0
+        }
+      )
       return Math.max(...precisions)
     }
     const mergedPlaceholderRef = useMemo(() => {
@@ -385,6 +388,7 @@ export default defineComponent({
           size={this.mergedSize}
           placeholder={this.mergedPlaceholder}
           disabled={this.mergedDisabled}
+          readonly={this.readonly as any}
           textDecoration={
             this.displayedValueInvalid ? 'line-through' : undefined
           }
@@ -407,7 +411,9 @@ export default defineComponent({
                   ),
                   <NButton
                     text
-                    disabled={!this.minusable || this.mergedDisabled}
+                    disabled={
+                      !this.minusable || this.mergedDisabled || this.readonly
+                    }
                     focusable={false}
                     builtinThemeOverrides={this.buttonThemeOverrides}
                     onClick={this.handleMinusClick}
@@ -425,7 +431,9 @@ export default defineComponent({
                   </NButton>,
                   <NButton
                     text
-                    disabled={!this.addable || this.mergedDisabled}
+                    disabled={
+                      !this.addable || this.mergedDisabled || this.readonly
+                    }
                     focusable={false}
                     builtinThemeOverrides={this.buttonThemeOverrides}
                     onClick={this.handleAddClick}