Skip to content

Commit

Permalink
[InputNumber]修复精度问题；支持超过 16 位的大数 (#1240) (#1302)
Browse files Browse the repository at this point in the history 
* feat(input-number): input-number supports slots

* feat(input-number): large number

* feat(input-number): large number support

* fix(input-number): large number

* fix(input-number): form can disable input-number

* feat(input-number): add label and suffix props to input-number

* test(table): update snapshots

Co-authored-by: sheepluo <[email protected]>
  • Loading branch information
@uyarn @chaishi
uyarn and chaishi authored Aug 16, 2022
1 parent bc3adfc commit e0da354
Show file tree
Hide file tree
Showing 30 changed files with 1,357 additions and 1,386 deletions.
2 changes: 1 addition & 1 deletion examples/form/demos/disabled.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<t-checkbox-group v-model="formData.course" :options="courseOptions" />
</t-form-item>
<t-form-item label="绩点" name="gradePoint">
<t-input-number v-model="formData.gradePoint" theme="normal" placeholder="数字" />
<t-input-number v-model="formData.gradePoint" placeholder="数字" />
</t-form-item>
<t-form-item label="头像" name="avatar">
<t-upload
Expand Down
99 changes: 51 additions & 48 deletions examples/input-number/demos/center.vue
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,64 @@
<template>
<div>
<t-input-number
v-model="value"
theme="row"
size="medium"
:max="15"
:min="-2"
:disabled="false"
:on-change="onChange"
:on-focus="onFocus"
:on-blur="onBlur"
:on-enter="onKeydownEnter"
:on-keydown="onKeydown"
:on-keyup="onKeyup"
:on-keypress="onKeypress"
@change="handleChange"
@focus="handleFocus"
@blur="handleBlur"
@enter="handleKeydownEnter"
@keydown="handleKeydown"
@keyup="handleKeyup"
@keypress="handleKeypress"
></t-input-number>
<div class="tdesign-demo-block-column-large tdesign-demo__input-number-center">
<div>
<t-input-number v-model="value1" :step="0.1" :max="5" autoWidth />
</div>

<div>
<t-input-number v-model="decimalValue" :step="0.18" :max="5" autoWidth />
</div>

<div>
<t-input-number
v-model="value2"
theme="row"
:max="15"
:min="-2"
:disabled="false"
:tips="tips"
suffix="个"
style="width: 160px"
@change="handleChange"
@validate="onValidate"
@blur="handleBlur"
@focus="handleFocus"
@enter="handleEnter"
></t-input-number>
</div>
</div>
</template>

<script>
export default {
data() {
return {
value: 3,
onChange: (v, ctx) => {
console.info('onChange', v, ctx);
},
onFocus: (v, ctx) => {
console.info('onFocus', v, ctx);
},
onBlur: (v, ctx) => {
console.info('onBlur', v, ctx);
},
onKeydownEnter: (v, ctx) => {
console.info('onEnter', v, ctx);
},
onKeydown: (v, ctx) => {
console.info('onKeydown', v, ctx);
},
onKeyup: (v, ctx) => {
console.info('onKeyup', v, ctx);
},
onKeypress: (v, ctx) => {
console.info('onKeypress', v, ctx);
},
// 如果希望默认显示为空，请使用 ''，切勿使用 undefined
value1: '',
value2: 100,
decimalValue: 3.41,
error: undefined,
};
},
computed: {
tips() {
if (this.error === 'exceed-maximum') return 'number can not be exceed maximum';
if (this.error === 'below-minimum') return 'number can not be below minimum';
return undefined;
},
},
methods: {
handleChange(v, ctx) {
console.info('change', v, ctx);
},
onValidate({ error }) {
this.error = error;
},
handleFocus(v, ctx) {
console.info('focus', v, ctx);
},
handleBlur(v, ctx) {
console.info('blur', v, ctx);
},
handleKeydownEnter(v, ctx) {
console.info('enter', v, ctx);
},
handleKeydown(v, ctx) {
console.info('keydown', v, ctx);
},
Expand All @@ -75,6 +68,16 @@ export default {
handleKeypress(v, ctx) {
console.info('keypress', v, ctx);
},
handleEnter(v, ctx) {
console.info('enter', v, ctx);
},
},
};
</script>

<style>
/** 数字输入框过短换行时，则通过 CSS 调整宽度 */
.tdesign-demo__input-number-center .t-input__tips {
width: 300px;
}
</style>
33 changes: 24 additions & 9 deletions examples/input-number/demos/format.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
<template>
<div>
<t-input-number
v-model="value"
:max="15"
:min="-2"
:format="value => `${value}%`"
@change="onChange"
></t-input-number>
<div class="tdesign-demo-block-column-large">
<div>
<t-input-number
v-model="value1"
:max="15"
:min="-2"
:format="(value) => `${value} %`"
autoWidth
@change="onChange"
></t-input-number>
</div>

<!-- 小数位数和格式化函数组合使用 -->
<div>
<t-input-number
v-model="value2"
:decimalPlaces="2"
:format="(value, { fixedNumber }) => `${fixedNumber} %`"
autoWidth
@change="onChange"
></t-input-number>
</div>
</div>
</template>

<script>
export default {
data() {
return {
value: 3,
value1: 3,
value2: 3.01,
};
},
methods: {
Expand Down
22 changes: 22 additions & 0 deletions examples/input-number/demos/large-number.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<div class="tdesign-demo-block-column-large">
<div>
<t-input-number v-model="value1" largeNumber :decimalPlaces="2" step="1" style="width: 300px"></t-input-number>
</div>

<div>
<t-input-number v-model="value2" largeNumber step="0.888" style="width: 300px"></t-input-number>
</div>
</div>
</template>

<script>
export default {
data() {
return {
value1: '19999999999999999',
value2: '0.8975527383412673418',
};
},
};
</script>
5 changes: 5 additions & 0 deletions examples/input-number/demos/left.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<template>
<div>
<t-input-number v-model="value" theme="column"></t-input-number>

<t-input-number
v-model="value"
theme="column"
align="center"
:max="15"
:min="-2"
label="数字"
style="width: 150px"
></t-input-number>
</div>
</template>
Expand Down
15 changes: 12 additions & 3 deletions examples/input-number/demos/normal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
<template>
<div>
<div style="display: flex; justify-content: space-between">
<t-input-number v-model="value" theme="normal" :max="15" :min="-2"></t-input-number>

<t-input-number v-model="value" theme="normal" align="right" style="width: 130px">
<template #label><span>金额：</span></template>
<template #suffix><span>元</span></template>
</t-input-number>

<t-input-number
v-model="value"
theme="normal"
:max="15"
:min="-2"
align="right"
label="机器："
suffix="台"
style="width: 130px"
></t-input-number>
</div>
</template>
Expand Down
109 changes: 78 additions & 31 deletions examples/input-number/demos/status.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,82 @@
<template>
<div>
<div class="tdesign-demo-block-column-large">
<div>
<t-radio-group v-model="type" variant="default-filled">
<t-radio-button value="hide">隐藏文本提示</t-radio-button>
<t-radio-button value="align-left">文本提示左对齐</t-radio-button>
<t-radio-button value="align-input">文本提示对齐输入框</t-radio-button>
</t-radio-group>
</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>
<!-- 隐藏文本提示 -->
<template v-if="type === 'hide'">
<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>
</template>

<!-- 文本提示左对齐 -->
<template v-if="type === 'align-left'">
<t-form-item label="正常提示">
<t-input-number v-model="value6" tips="这是普通文本提示"></t-input-number> </t-form-item
><br />
<t-form-item label="成功提示">
<t-input-number v-model="value7" status="success" tips="校验通过文本提示"></t-input-number> </t-form-item
><br />
<t-form-item label="警告提示">
<t-input-number v-model="value8" status="warning" tips="校验不通过文本提示"></t-input-number> </t-form-item
><br />
<t-form-item label="错误提示">
<t-input-number
v-model="value9"
status="error"
tips="校验存在严重问题文本提示"
></t-input-number> </t-form-item
><br />
</template>

<!-- 文本提示对齐输入框 -->
<template v-if="type === 'align-input'">
<t-form-item label="正常提示">
<t-input-number v-model="value6" :inputProps="{ tips: '这是普通文本提示' }"></t-input-number> </t-form-item
><br />
<t-form-item label="成功提示">
<t-input-number
v-model="value7"
status="success"
:inputProps="{ tips: '校验通过文本提示' }"
></t-input-number> </t-form-item
><br />
<t-form-item label="警告提示">
<t-input-number
v-model="value8"
status="warning"
:inputProps="{ tips: '校验不通过文本提示' }"
></t-input-number> </t-form-item
><br />
<t-form-item label="错误提示">
<t-input-number
v-model="value9"
status="error"
:inputProps="{ tips: '校验存在严重问题文本提示' }"
></t-input-number> </t-form-item
><br />
</template>
</t-form>
</div>
</template>
Expand All @@ -39,6 +85,7 @@
export default {
data() {
return {
type: 'align-input',
value0: 3,
value1: 3,
value2: 3,
Expand Down
Loading

0 comments on commit e0da354

Please sign in to comment.