vue3设置指令控制el-input输入框只允许输入数字以及保留两位小数

NO.1
注册指令

在main.js中

// 注册一个全局自定义指令 `v-decimal` (设置限制仅可以输入两位小数)
app.directive('decimal', {
// 当被绑定的元素插入到 DOM 中时……
mounted: (el, binding) => {
  // 获取参数
  let paramsData = binding.value || {}
  console.log(`paramsData`, paramsData)
  // 获取element中的input元素dom
  let inputDom = el.children[0].children[0]
  // 监听dom值的变化
  inputDom.addEventListener(`keyup`, () => {
    // 设置只允许输入数字以及两位小数
    let valueNum = inputDom.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
​
    inputDom.value = valueNum
    console.log(`decimal inputDom.value`, inputDom.value)
​
    let minNum = paramsData.minNum || 0
    let maxNum = paramsData.maxNum || 999999999999
​
    if (inputDom.value < minNum) {
      inputDom.value = minNum
    }
    if (inputDom.value > maxNum) {
      inputDom.value = maxNum
    }
​
    inputDom.dispatchEvent(new Event('input'))
  })
},
})

NO.2
使用指令

el-input

无限制最小值和最大值

v-decimal

指定最小值为0,最大值为100

v-decimal="{ minNum: 0, maxNum: 100 }"

完整示例

<el-input
        v-model.lazy="dataAll.formData.flowReturn"
        v-decimal="{ minNum: 0, maxNum: 100 }"
        clearable
        placeholder="请输入比例"
        style="width: 100%"
        >
  <template #suffix>
      <i style="font-style: normal; margin-right: 0px">%</i>
  </template>
</el-input>
</el-form-item>

NO.3
Tips

以下写法经测试,会有v-model数据不同步问题

输入数字1.235

指令中元素inputDom.value的值会被截取为1.23

但是v-model的值为1.235,被截取的最后一位小数,始终会赋值给v-model

具体原因不知

// 注册一个全局自定义指令 `v-decimal` (设置限制仅可以输入两位小数)
app.directive('decimal', {
    // 当被绑定的元素插入到 DOM 中时……
    created: (el) => {
        // 获取element中的input元素dom
        let inputDom = el.children[0].children[0]
        // 监听dom值的变化
        inputDom.addEventListener(`input`, () => {
            let timer = setTimeout(() => {
                // 设置只允许输入数字以及两位小数
                inputDom.value = inputDom.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }
                // if (isNaN(inputDom.value)) {
                //   inputDom.value = ''
                // }
            }, 100)
            })
    },
})

END.