el-input 保留两位小数自定义指令

原创已于 2023-03-31 09:12:16 修改 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-29 13:39:03 首次发布

该文章介绍了一个Vue.js自定义指令，用于数值输入时自动保留指定的小数位数。指令可以接受一个参数来设定保留位数，默认为9位。当输入值超过设定的最大数值时，会回显旧值。这个指令可以应用在需要控制数字精度的输入场景，如财务表单。

记录一下自定义指令

后续优化了一下，现在保留2位小数，并传递需要保留的位数，不传递默认保留9位小数

export default {
    bind(el, binding, vnode) {
        const numberLength = binding.value || 9
        vnode.componentInstance.$watch('value', function (newValue,oldValue) {
            const index = newValue.indexOf(".");
            // 保留两位
            if (index != -1) {
                const value = newValue.slice(0, index + 3);
                vnode.componentInstance.$emit('input', value)
            }
            const numberLengthArr = [1]
            for(let n = 1; n <= numberLength ; n++){
                numberLengthArr.push(0)
            }
            if(newValue >= +numberLengthArr.join('')) node.componentInstance.$emit('input', oldValue)
        })
    }
}

使用方法

<!-- 保留两位小数，并保留三位数 -->
<el-input
    v-keepTwoBits="3"
    placeholder="请输入费用"
    v-model="steps1Form.policyFee"
    type="number"
></el-input>

<!-- 保留两位小数，并保留久位数 默认 -->
<el-input
    v-keepTwoBits
    placeholder="请输入保费合计"
    v-model="steps1Form.policyFee"
    type="number"
></el-input>