test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-10 07:07:56 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(components): [input-number] add new prop readonly (#9545)

Browse Source
This commit is contained in:
zz 2022-08-31 11:47:26 +08:00 committed by GitHub
parent 193ef92e1e
commit b076b61c01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en-US/component/input-number.md
View File

@ -90,6 +90,7 @@ input-number/controlled
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large/small | default |
| readonly | same as `readonly` in native input | boolean | — | false |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |

24
packages/components/input-number/__tests__/input-number.test.tsx
View File

@ -1,6 +1,6 @@
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it, test } from 'vitest'
import { describe, expect, it, test, vi } from 'vitest'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ElFormItem } from '@element-plus/components/form'
import InputNumber from '../src/input-number.vue'
@ -157,6 +157,28 @@ describe('InputNumber.vue', () => {
)
})
test('readonly', async () => {
const num = ref(0)
const handleFocus = vi.fn()
const wrapper = mount(() => (
<InputNumber readonly v-model={num.value} onFocus={handleFocus} />
))
wrapper.find('.el-input__inner').trigger('focus')
await nextTick()
expect(handleFocus).toHaveBeenCalledTimes(1)
wrapper.find('.el-input-number__decrease').trigger('mousedown')
document.dispatchEvent(mouseup)
await nextTick()
expect(wrapper.find('input').element.value).toEqual('0')
wrapper.find('.el-input-number__increase').trigger('mousedown')
document.dispatchEvent(mouseup)
await nextTick()
expect(wrapper.find('input').element.value).toEqual('0')
})
test('disabled', async () => {
const num = ref(0)
const wrapper = mount(() => (

1
packages/components/input-number/src/input-number.ts
View File

@ -28,6 +28,7 @@ export const inputNumberProps = buildProps({
default: Number.NEGATIVE_INFINITY,
},
modelValue: Number,
readonly: Boolean,
disabled: Boolean,
size: useSizeProp,
controls: {

5
packages/components/input-number/src/input-number.vue
View File

@ -42,6 +42,7 @@
:step="step"
:model-value="displayValue"
:placeholder="placeholder"
:readonly="readonly"
:disabled="inputNumberDisabled"
:size="inputNumberSize"
:max="max"
@ -174,13 +175,13 @@ const ensurePrecision = (val: number, coefficient: 1 | -1 = 1) => {
return toPrecision(val + props.step * coefficient)
}
const increase = () => {
if (inputNumberDisabled.value || maxDisabled.value) return
if (props.readonly || inputNumberDisabled.value || maxDisabled.value) return
const value = props.modelValue || 0
const newVal = ensurePrecision(value)
setCurrentValue(newVal)
}
const decrease = () => {
if (inputNumberDisabled.value || minDisabled.value) return
if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
const value = props.modelValue || 0
const newVal = ensurePrecision(value, -1)
setCurrentValue(newVal)