输入框自动保留2位小数

最新推荐文章于 2024-06-11 11:08:11 发布

学不会•

最新推荐文章于 2024-06-11 11:08:11 发布

阅读量400

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_41588991/article/details/132872346

版权

<template>
  <div class="box">
    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
      <el-form-item label="保留2位小数" prop="aaa">
        <!-- v-numberInt自定义的指令 -->
        <el-input v-model="form.aaa" v-numberInt:2='form.aaa'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        aaa: ''
      },
      rules: {
        aaa: [
          { required: true, validator: VALIDATEaaa, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
        }
      })
    }
  }
}
// 校验规则
const VALIDATEaaa = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入0-100的数字，小数点后两位'))
  } else if (String(value) == '100.0' || String(value) == '100.00') {
    callback();
  } else if (value && !(/^(([1-9]\d|[0-9])(\.\d{1,2})|([1-9]\d|[0-9]|100))$/.test(value))) {
    callback(new Error('请输入0-100的数字，小数点后两位'))
  } else if (value < 0 || value > 100) {
    callback(new Error('请输入0-100的数字，小数点后两位'))
  } else {
    callback();
  }
}
</script>

<style lang="less" scoped>
.box {
  margin-left: 100px;
}
</style>

// 自定义指令代码放到main.js文件中

// 自定义指令
Vue.directive('numberInt', {
  bind: function (el, binding, vnode) {
    const element = el.getElementsByTagName('input')[0]
    const len = binding.arg // 初始化设置 
    // element.value = Number(element.value).toFixed(len) //不需默认值
    // 监听失焦时候格式化
    element.addEventListener('blur', function () {
      if (element.value) {
        if (isNaN(element.value)) {
          vnode.data.model.callback(element.value)
        } else {
          vnode.data.model.callback(Number(element.value).toFixed(len))
        }
      }
    })
  }
})