vue输入框保留小数位（v-decimalsNum指令）

问题描述

在平时开发中，经常会出现需要对输入框做保留小数位处理（原生type=number有坑），在当前输入框使用@change、@blur、@input等事件或者干脆用watch监听处理保留小数位不利于维护，在这里针对保留小数位封装成指令

指令核心

import Vue from 'vue'

const isNumber = val => typeof val === 'number' && val === val

// 使用 v-decimalsNum="2" 如果为0，则不保留小数位
Vue.directive('decimalsNum', {

  inserted: function (el, binding, vnode) {

    // 获取到input元素
    let targetObj = el.firstElementChild

    // 获取指定保留多少位小数
    let pos = binding.value && binding.value !== 0 ? binding.value : 2

    // 监听blur事件
    targetObj.addEventListener('blur', function (event) {

      if (!binding.value) {
        return
      }

      let v = parseFloat(targetObj.value)

      if (isNumber(v)) {

        let pow = Math.pow(10, pos)

        let result = (Math.round(v * pow) / pow).toString()

        targetObj.value = result

        vnode.data.model.callback(result)

      }

    })

  }
})