Vue input格式化展示

computed

需要输入或粘贴一段内容到输入框，移除所有空格
输入手机号： 139 1234 5678
显示：13912345678
值：13912345678

输入邮箱后缀同理
输入：someone
显示：someone@163.com

使用vue计算属性的getter和setter
https://cn.vuejs.org/v2/guide/computed.html

<Input style="width:150px" clearable v-model="phoneNumber"></Input>

<script>
export default {
  data () {
    return {
      info: {
        phoneNumber: ''
      },
    }
   },
  computed: {
	phoneNumber: {
      get () {
        return this.info.phoneNumber.replace(/\s/g, '')
      },
      set (val) {
        this.info.phoneNumber = val.replace(/\s/g, '')
      }
    }
  }
}
</script>

v-model.trim

//去除首尾空格
<input type = "text" v-model.trim="message">

iView inputNumber formatter

iView的inputNumber组件提供了formatter和parser属性来格式化数据
https://www.iviewui.com/components/input-number
输入：1
显示：1 s
值：1

<InputNumber class="input-style" v-model="procedure.timeout"
  placeholder="Please enter the execute timeout" type="number" :min="1"
  :formatter="value => `${value} S`" :parser="value => value.replace(' S', '')">
</InputNumber>