zoukankan      html  css  js  c++  java
  • element el-input小数保留两位小数,整数字符串去空格

     1 <template>
     2   <div>
     3     <el-input v-model="nInput" :placeholder="placeholder" :readonly="readonly" :disabled="disabled" :clearable="clearable" @input="onInputValue()" @blur="salaryChange" />
     4   </div>
     5 </template>
     6 
     7 <script>
     8 export default {
     9   props: {
    10     value: {
    11       type: [String, Number]
    12     },
    13     placeholder: {
    14       type: String
    15     },
    16     clearable: {
    17       type: Boolean,
    18       default: false
    19     },
    20     disabled: {
    21       type: Boolean,
    22       default: false
    23     },
    24     readonly: {
    25       type: Boolean,
    26       default: false
    27     },
    28     inputType: {
    29       type: Number,
    30       default: 99
    31     }
    32   },
    33   data() {
    34     return {
    35       nInput: null
    36     }
    37   },
    38   watch: {
    39     nInput(val, oldVal) {
    40       this.$emit('input', val)
    41     },
    42     value(val, oldVal) {
    43       this.nInput = val
    44     }
    45   },
    46   created() {
    47     this.nInput = this.value
    48   },
    49   methods: {
    50     //控制只能输入小数点后2位
    51     onInputValue() {
    52       // console.log(this.inputType)
    53       if (this.inputType === 1) {
    54         //int正整数类型
    55         this.nInput = this.nInput.replace(/[^d]/g, '') //清除“数字”和“.”以外的字符
    56       } else if (this.inputType === 2) {
    57         //正小数类型,保留两位小数
    58         this.nInput = this.nInput.replace(/[^d.]/g, '') //清除“数字”和“.”以外的字符
    59         this.nInput = this.nInput.replace(/.{2,}/g, '.') //只保留第一个. 清除多余的
    60         this.nInput = this.nInput.replace('.', '$#$').replace(/./g, '').replace('$#$', '.')
    61         this.nInput = this.nInput.replace(/^(-)*(d+).(dd).*$/, '$1$2.$3') //只能输入两个小数
    62         if (this.nInput.indexOf('.') < 0 && this.nInput != '') {
    63           //以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
    64           this.nInput = parseFloat(this.nInput)
    65         }
    66       } else if (this.inputType === 2) {
    67         //字符串类型,所有地方都不能有空格
    68         this.nInput = this.nInput.replace(/s/g, '') //清除空格
    69       }
    70       else{
    71         //字符串类型,前后不能有空格
    72         this.nInput = this.nInput.trim() //清除空格
    73       }
    74     },
    75     salaryChange(e) {
    76       // 在输入框失去焦点的时候,把value值赋值给v-model绑定变量,使两者保持一致
    77       //   console.log('触发重新绑定值')
    78       this.nInput = e.target.value
    79     }
    80   }
    81 }
    82 </script>
    83 
    84 <style lang="scss" scoped>
    85 </style>
  • 相关阅读:
    数据转换类型和算数运算符
    语言基础+数据类型
    JS(一)Prototype的使用
    Jquery EasyUI简介和数据的增删改查
    http简介
    《JavaScript语言精粹》笔记
    wcf
    简单工厂模式与抽象工厂模式
    <转载>C#中的特性(Attributes)
    <转载>C#IEnumerable和IEnumerator 详解
  • 原文地址:https://www.cnblogs.com/HCXiao/p/14781398.html
Copyright © 2011-2022 走看看