<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))}}})}
})