109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
|
<docs>
|
|||
|
|
---
|
|||
|
|
order: 9
|
|||
|
|
title:
|
|||
|
|
zh-CN: 输入时格式化展示
|
|||
|
|
en-US: Format Tooltip Input
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## zh-CN
|
|||
|
|
|
|||
|
|
结合 [Tooltip](/components/tooltip-cn/) 组件，实现一个数值输入框，方便内容超长时的全量展现。
|
|||
|
|
|
|||
|
|
## en-US
|
|||
|
|
|
|||
|
|
You can use the Input in conjunction with [Tooltip](/components/tooltip/) component to create a Numeric Input, which can provide a good experience for extra-long content display.
|
|||
|
|
|
|||
|
|
</docs>
|
|||
|
|
<template>
|
|||
|
|
<a-tooltip :trigger="['focus']" placement="topLeft" overlay-class-name="numeric-input">
|
|||
|
|
<template v-if="inputValue" #title>
|
|||
|
|
<span class="numeric-input-title">
|
|||
|
|
{{ formatValue }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<a-input
|
|||
|
|
v-model:value="inputValue"
|
|||
|
|
placeholder="Input a number"
|
|||
|
|
:max-length="25"
|
|||
|
|
style="width: 120px"
|
|||
|
|
@blur="onBlur"
|
|||
|
|
/>
|
|||
|
|
</a-tooltip>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { computed, defineComponent, ref, watch } from 'vue';
|
|||
|
|
|
|||
|
|
function formatNumber(value: string) {
|
|||
|
|
value += '';
|
|||
|
|
const list = value.split('.');
|
|||
|
|
const prefix = list[0].charAt(0) === '-' ? '-' : '';
|
|||
|
|
let num = prefix ? list[0].slice(1) : list[0];
|
|||
|
|
let result = '';
|
|||
|
|
|
|||
|
|
while (num.length > 3) {
|
|||
|
|
result = `,${num.slice(-3)}${result}`;
|
|||
|
|
num = num.slice(0, num.length - 3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (num) {
|
|||
|
|
result = num + result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
setup() {
|
|||
|
|
const inputValue = ref<string>('111');
|
|||
|
|
const formatValue = computed(() => {
|
|||
|
|
if (inputValue.value === '-') return '-';
|
|||
|
|
return formatNumber(inputValue.value);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const format = (val: string, preVal: string) => {
|
|||
|
|
const reg = /^-?\d*(\.\d*)?$/;
|
|||
|
|
|
|||
|
|
if ((!isNaN(+val) && reg.test(val)) || val === '' || val === '-') {
|
|||
|
|
inputValue.value = val;
|
|||
|
|
} else {
|
|||
|
|
inputValue.value = preVal;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// '.' at the end or only '-' in the input box.
|
|||
|
|
const onBlur = () => {
|
|||
|
|
if (
|
|||
|
|
inputValue.value.charAt(inputValue.value.length - 1) === '.' ||
|
|||
|
|
inputValue.value === '-'
|
|||
|
|
) {
|
|||
|
|
format(inputValue.value.slice(0, -1), inputValue.value);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
watch(inputValue, (val, preVal) => {
|
|||
|
|
format(val, preVal);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
inputValue,
|
|||
|
|
onBlur,
|
|||
|
|
formatValue,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
/* to prevent the arrow overflow the popup container,
|
|||
|
|
or the height is not enough when content is empty */
|
|||
|
|
.numeric-input .ant-tooltip-inner {
|
|||
|
|
min-width: 32px;
|
|||
|
|
min-height: 37px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.numeric-input .numeric-input-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
</style>
|