Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(stepper): stepper输入小数 #1113

Merged
merged 7 commits into from
Oct 3, 2023
Merged

fix(stepper): stepper输入小数 #1113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58ca278
fix(stepper): stepper输入小数
fennghuang Sep 26, 2023
6799cdb
fix(stepper): stepper输入小数
fennghuang Sep 26, 2023
75462a0
fix(stepper): stepper输入小数
fennghuang Sep 26, 2023
9d7d6eb
fix(stepper): stepper输入小数
fennghuang Sep 27, 2023
79c4e4b
fix(stepper): stepper输入小数-snap
fennghuang Sep 27, 2023
0f29e33
fix(stepper): stepper输入小数-测试用例
fennghuang Sep 27, 2023
deb569f
fix(stepper): stepper输入小数
fennghuang Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/form/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1063,6 +1063,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -2791,6 +2792,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -4377,6 +4379,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down
30 changes: 30 additions & 0 deletions src/shared/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,33 @@ export const reconvertUnit = (val: string | number | undefined) => {
if (val == null) return 0;
return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
};

/**
* 格式化数字
* @param value 传入的数字字符串
* @param allowDecimal 是否允许小数，默认为 true
* @param allowNegative 是否允许负数，默认为 true
* @returns 返回格式化后的数字字符串
*/
export const formatNumber = (value: string, allowDecimal = true, allowNegative = true) => {
if (allowDecimal) {
const index = value.indexOf('.');
if (index !== -1) {
value = `${value.slice(0, index + 1)}${value.slice(index).replace(/\./g, '')}`;
}
} else {
const [splitValue = ''] = value.split('.');
value = splitValue;
}

if (allowNegative) {
const index = value.indexOf('-');
if (index !== -1) {
value = `${value.slice(0, index + 1)}${value.slice(index).replace(/-/g, '')}`;
}
} else {
value = value.replace(/-/g, '');
}

return value.replace(/[^\d.-]/g, '');
};
106 changes: 106 additions & 0 deletions src/stepper/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ exports[`Stepper > Stepper baseVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand All @@ -45,6 +46,48 @@ exports[`Stepper > Stepper baseVue demo works fine 1`] = `
</svg>
</div>
</div>
<div
class="t-stepper t-stepper--medium"
>
<div
class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"
>
<svg
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M4 11h16v2H4v-2z"
fill="currentColor"
/>
</svg>
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="decimal"
style=""
type="text"
/>
<div
class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"
>
<svg
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
`;

Expand Down Expand Up @@ -73,6 +116,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -114,6 +158,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -155,6 +200,7 @@ exports[`Stepper > Stepper minMaxVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -237,6 +283,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand All @@ -257,6 +304,48 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</svg>
</div>
</div>
<div
class="t-stepper t-stepper--medium"
>
<div
class="t-stepper__minus t-stepper__minus--filled t-stepper__icon--medium"
>
<svg
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M4 11h16v2H4v-2z"
fill="currentColor"
/>
</svg>
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="decimal"
style=""
type="text"
/>
<div
class="t-stepper__plus t-stepper__plus--filled t-stepper__icon--medium"
>
<svg
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
fill="currentColor"
/>
</svg>
</div>
</div>
</div>

</div>
Expand Down Expand Up @@ -306,6 +395,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -347,6 +437,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -388,6 +479,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -454,6 +546,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium t-stepper--filled-disabled"
disabled=""
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -523,6 +616,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -564,6 +658,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--outline t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -605,6 +700,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--normal t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -670,6 +766,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--large"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -711,6 +808,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -752,6 +850,7 @@ exports[`Stepper > Stepper mobileVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--small"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -804,6 +903,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--large"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -845,6 +945,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -886,6 +987,7 @@ exports[`Stepper > Stepper sizeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--small"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -935,6 +1037,7 @@ exports[`Stepper > Stepper statusVue demo works fine 1`] = `
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium t-stepper--filled-disabled"
disabled=""
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -983,6 +1086,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -1024,6 +1128,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--outline t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down Expand Up @@ -1065,6 +1170,7 @@ exports[`Stepper > Stepper themeVue demo works fine 1`] = `
</div>
<input
class="t-stepper__input t-stepper__input--normal t-stepper__input--medium"
inputmode="numeric"
style=""
type="tel"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/stepper/__test__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ describe('stepper', () => {
const wrapper = mount(<Stepper v-model={data.value} onChange={handleChange} />);
const $input = wrapper.find('.t-stepper__input').element;

const inputValue = 12;
const inputValue = '12';
await simulateEvent($input, inputValue, 'input');
expect(value.value).toBe(inputValue);
});
Expand Down
6 changes: 4 additions & 2 deletions src/stepper/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<div class="stepper-example">
<t-stepper v-model="number" theme="filled" />
<t-stepper v-model="integer" theme="filled" />
<t-stepper v-model="decimal" theme="filled" :integer="false" :step="0.5" />
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const number = ref(3);
const integer = ref(3);
const decimal = ref(3.5);
</script>

<style lang="less">
Expand Down
5 changes: 5 additions & 0 deletions src/stepper/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ export default {
type: [String, Number] as PropType<TdStepperProps['defaultValue']>,
default: 0,
},
/** 是否整数，为 true 仅允许输入不带小数点的数，为 false 允许输入带小数点的数 */
integer: {
anlyyao marked this conversation as resolved.
Show resolved Hide resolved
type: Boolean,
default: true,
},
/** 输入框失去焦点时触发 */
onBlur: Function as PropType<TdStepperProps['onBlur']>,
/** 数值发生变更时触发 */
Expand Down
1 change: 1 addition & 0 deletions src/stepper/stepper.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ name | type | default | description | required
disableInput | Boolean | false | \- | N
disabled | Boolean | false | \- | N
inputWidth | Number | - | \- | N
integer | Boolean | true | \- | N
max | Number | 100 | \- | N
min | Number | 0 | \- | N
size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
Expand Down
1 change: 1 addition & 0 deletions src/stepper/stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
disableInput | Boolean | false | 禁用输入框 | N
disabled | Boolean | false | 禁用全部操作 | N
inputWidth | Number | - | 输入框宽度 | N
integer | Boolean | true | 是否整形 | N
max | Number | 100 | 最大值 | N
min | Number | 0 | 最小值 | N
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
Expand Down
Loading