vue2+ts中a-input输入框组件中将小数点自动格式化百分比

在Vue2 + TypeScript中，你可以创建一个自定义的输入框组件（比如`AInput`），然后在该组件中实现小数点自动格式化为百分比的功能。下面是一个简单的示例：

首先，创建一个`AInput.vue`文件，定义`AInput`组件的模板和逻辑：

<template>
  <input v-model="formattedValue" @input="updateValue" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class AInput extends Vue {
  // 输入框的原始值
  private value: number | null = null;

  // 格式化后的值
  private formattedValue: string = '';

  // 监听输入框值的变化
  private updateValue(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value;
    // 移除非数字字符
    const numericValue = inputValue.replace(/[^\d.]/g, '');
    // 转换为小数
    const decimalValue = parseFloat(numericValue);
    // 格式化为百分比字符串
    this.formattedValue = (decimalValue * 100).toFixed(2) + '%';
    // 更新原始值
    this.value = decimalValue;
  }
}
</script>

然后，在你的父组件中使用`AInput`组件：

<template>
  <div>
    <h3>输入百分比：</h3>
    <AInput />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AInput from './AInput.vue';

@Component({
  components: {
    AInput,
  },
})
export default class ParentComponent extends Vue {
}
</script>

在上面的示例中，`AInput`组件会监听输入框的变化，并将输入框的值格式化为百分比字符串显示。同时，它也会将输入框的原始值存储在`value`属性中，你可以在父组件中通过`v-model`指令来获取该值。

这样，当你在父组件中使用`<AInput />`时，输入框将会自动格式化输入的小数为百分比显示。