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>
|