0.0.6 • Published 4 years ago

test-number-input v0.0.6

Weekly downloads
3
License
MIT
Repository
-
Last release
4 years ago

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-modelnumber、string''input框的绑定值
regstring''对数字输入框的限制类型int(正整数)、parseInt(正整数+0)、纯数字(number)、两位小数(twoNum)、四位小数(fourNum)
maxlengthnumber、string''输入框的长度限制
placeholderstring''输入框的占位显示
minValnumber、string''输入框的最小值
maxValnumber、string''输入框的最大值
disabledbooleanfalse禁用
sizestring'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