Ant Design Vue教程

Ant Design Vue Input 格式化提示

我们通常会遇到这样一种场景,输入一串条码为了用户可以方便校对需要把这串字符串进行格式化(比如逗号或者-符号隔开)

格式化提示

<template>
  <a-tooltip :trigger="['focus']" placement="topLeft" overlayClassName="numeric-input">
    <span slot="title" v-if="value" class="numeric-input-title">
      {{ value !== '-' ? formatNumber(value) : '-' }}
    </span>
    <template slot="title" v-else>
      Input a number
    </template>
    <a-input
      :value="value"
      @change="onChange"
      @blur="onBlur"
      placeholder="Input a number"
      :maxLength="25"
      style="width: 120px"
    />
  </a-tooltip>
</template>
<script>
function formatNumber(value) {
  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 {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    formatNumber,
    onChange(e) {
      const { value } = e.target;
      const reg = /^-?[0-9]*(\.[0-9]*)?$/;
      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
        this.value = value;
      }
    },
    // '.' at the end or only '-' in the input box.
    onBlur() {
      const { value, onChange } = this;
      let valueTemp = value;
      if (value.charAt(value.length - 1) === '.' || value === '-') {
        onChange({ value: value.slice(0, -1) });
      }
    },
  },
};
</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>
Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 Input 输入框用法 Input 密码框 Input 图标 Input 搜索框 Input 格式化提示 Input 属性及事件列表 Input addonAfter属性 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关