vcheck-directive

Vue 2/3 输入校验指令，支持整数、浮点数、负数和小数精度控制

特性

• 支持整数和浮点数输入限制
• 可控制小数位精度
• 可允许或禁止负数
• 可设置最小值和最大值
• 自动处理粘贴、输入法组合输入
• 支持 Vue 2 和 Vue 3 兼容
• 简单易用的 Vue 指令插件

安装

npm install @uxtools/uxcheck-directive
# or
yarn add @uxtools/uxcheck-directive

使用

全局注册

Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import VCheck from '@uxtools/uxcheck-directive'

const app = createApp(App)
app.use(VCheck) // 默认指令名为 v-check
app.mount('#app')

Vue 2

import Vue from 'vue'
import App from './App.vue'
import VCheck from '@uxtools/uxcheck-directive'

Vue.use(VCheck) // 默认指令名为 v-check
new Vue(App).$mount('#app')

在模版中使用

<template>
  <div>
    <!-- 浮点数，保留两位小数，允许负数，限制 0~100 -->
    <input v-check.float="{ precision: 2, allowNegative: true, min: 0, max: 100 }" />

    <!-- 整数，不允许负数 -->
    <input v-check.int="{ allowNegative: false }" />

    <!-- 整数，最小值为 0 -->
    <input v-check="{ type: 'int', min: 0 }" />
  </div>
</template>

Vue 2 和 Vue 3 兼容说明

vcheck-directive 同时支持 Vue 2.7+ 和 Vue 3 版本，使用方式完全一致，确保了代码的复用性和迁移的便利性。

注意事项：

• Vue 2 中使用时，确保 Vue 版本 >= 2.7.0
• 指令的所有配置和修饰符在两个版本中具有相同的行为
• 全局注册方式略有不同，详细请参考上面的示例

指令参数

类型（type） • int：整数 • float：浮点数（默认）

可选配置 • precision：小数位精度（默认 2） • allowNegative：是否允许负数（默认 false） • min：最小值（默认 -Infinity） • max：最大值（默认 Infinity）

参数详细说明

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | precision | number | - | 浮点数的小数位精度 | | allowNegative | boolean | false | 是否允许负数 | | min | number | - | 最小值 | | max | number | - | 最大值 |

指令修饰符

• v-check.int：等同于 v-check="{ type: 'int' }"
• v-check.float：等同于 v-check="{ type: 'float' }"

更新日志

• 1.0.6 • 增加错误防护包装，不会影响现有API的使用
• 1.0.5 • 兼容 Vue 2.7+ 和 Vue 3 版本