Vue3 Element 输入框限制小数点后六位

可以使用 Vue3 的自定义指令来实现精确小数点后六位的输入限制。

首先，在 Vue3 中创建自定义指令的方式有所改变，需要使用 app.directive 方法进行注册。具体实现代码如下：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

// 注册自定义指令
app.directive('precision', {
  // 当被绑定的元素插入到 DOM 中时
  mounted(el, binding) {
    el.addEventListener('input', () => {
      // 获取输入框的值
      let value = el.value;

      // 通过正则表达式判断输入的值是否符合要求
      if (/^\d+(\.\d{1,6})?$/.test(value)) {
        // 如果输入的值符合要求，则将输入框的值更新为符合要求的数值
        el.value = parseFloat(value).toFixed(6);
      } else {
        // 如果输入的值不符合要求，则将输入框的值重置为上一次符合要求的数值
        el.value = binding.value;
      }
    });
  }
});

app.mount('#app');

在上述代码中，我们使用 app.directive 方法注册了一个名为 precision 的自定义指令，用于精确限制输入框中数字的小数位数。在该指令的 mounted 钩子函数中，我们通过 el.addEventListener 方法监听输入框的 input 事件，获取输入框的值，并使用正则表达式判断输入的值是否符合要求。如果输入的值符合要求，则将输入框的值更新为符合要求的数值，否则将输入框的值重置为上一次符合要求的数值。

使用自定义指令时，我们需要将指令名称作为标签属性绑定到要限制小数位数的输入框上，并将输入框的值绑定到指令的值上。具体实现代码如下：

<template>
  <div>
    <input v-model="value" v-precision="value" type="number">
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

在上述代码中，我们将 v-precision 指令绑定到 input 标签上，同时将输入框的值绑定到指令的值上。这样，当我们在输入框中输入数字时，自定义指令会自动限制输入的小数位数，并将输入框的值更新为符合要求的数值。