【源码】基于 Vue 的数字输入内容约束插件

项目简介

vue-number-directive 是一个 Vue 插件项目，其核心功能是对输入内容进行约束，使输入内容始终保持为符合要求的数字，满足用户设定的规则。

项目的主要特性和功能

1. 支持元素广泛：支持多种 <input> 元素（text、tel、password、search、hidden 类型及未指定类型）、<textarea> 元素、contenteditable 属性为真值的元素，以及包含上述元素的 Vue 组件（如 ElementUI 的 Input 和 NumberInput）。
2. 灵活配置选项：可通过配置选项对输入数字进行约束，如限定是否为整数、是否为正数，设置最小值、最大值等。
3. 指令修饰符：提供 int 和 pos 指令修饰符，分别用于指定输入是否为整数和是否为正数。

安装使用步骤

安装

1. Node（作为依赖引入打包系统） sh yarn add vue-number-directive npm install vue-number-directive --save
2. 浏览器 使用 dist/ 目录中的 umd.js 文件，参考 UMD example ```html

```

使用

1. 全局插件方式 ```js import Vue from 'vue' import NumberDirective from 'vue-number-directive' // If you want to use source code for projects with esm packaging system, import src file // import NumberDirective from 'vue-number-directive/src/index'

Vue.use(NumberDirective, globalOptions) 2. **指令方式**js import Vue from 'vue' import { NumberDirective } from 'vue-number-directive'

Vue.directive('{{name}}', NumberDirective) // or use as a local directive export default { directives: { number: NumberDirective } } ```

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】