0.0.6 • Published 4 years ago
test-number-input v0.0.6
number-input
简介
这是一个数字输入框,不管是中文输入法还是英文输入法,限制用户输入的内容必须是数字;输入格式可以是纯数字、正整数、两位小数、四位小数。
开发人员可以根据自己需要,添加正则来完成你想要的数字格式需求。样式是基于element-ui风格。
适用场景
PC
端,项目中含有element-ui组件(版本 >= 2.11.0
),按需引入了Input
组件
快速开始
npm install jl-number-input
注册组件
import jlNumberInput from 'jl-number-input';
Vue.use(jlNumberInput);
组件截图
使用实例
<h3>正整数输入框</h3>
<jl-number-input
v-model="inputVal"
@blur="blur"
reg="int">
</jl-number-input>
<h3>两位小数</h3>
<jl-number-input
v-model="inputTwo"
reg="twoNum">
</jl-number-input>
参数说明
参数名 | 参数类型 | 默认值 | 说明 |
---|---|---|---|
v-model | number、string | '' | input框的绑定值 |
reg | string | '' | 对数字输入框的限制类型int(正整数)、parseInt(正整数+0)、纯数字(number)、两位小数(twoNum)、四位小数(fourNum) |
maxlength | number、string | '' | 输入框的长度限制 |
placeholder | string | '' | 输入框的占位显示 |
minVal | number、string | '' | 输入框的最小值 |
maxVal | number、string | '' | 输入框的最大值 |
disabled | boolean | false | 禁用 |
size | string | 'medium' | el 输入框的尺寸 medium / small / mini |
事件
blur
参数 val
说明
输入框失去焦点的时候触发,返回当前输入框的绑定值
<jl-number-input
v-model="inputTwo"
@blur="blur"
reg="twoNum">
</jl-number-input>
目录结构
|———— examples # 示例文件夹
|———— App.vue
|———— main.js
|———— lib # 组件源码
|———— views # 组件内容
|———— main.vue
|———— index.js # 组件入口文件
|———— node_modules
|———— .babelrc
|———— .editorconfig
|———— .gitignore
|———— index.html # 示例入口HTML
|———— package.json
|———— README.md
作者
姓名
谢嘉欣
邮箱
xiejiaxin@julive.com