vue js正则只输入数字_Vue.js具有丰富功能的数字输入

vue js正则只输入数字

vue-number-smarty (vue-number-smarty)

Number input with rich functionality for Vue.js.

Vue.js具有丰富功能的数字输入。

View Demo 查看演示 View Github 查看Github

特征 (Features)

1. integer/float

   整数/浮点数

2. signed/unsigned

   签名/未签名

3. step size

   一步的大小

4. increment/decrement value by scrolling when focused

   聚焦时通过滚动增加/减少值

5. align variants

   对齐变体

6. min and max boundaries

   最小和最大边界

7. max length of integer part (only for float type)

   整数部分的最大长度(仅适用于浮点型)

8. max length of float part (only for float type)

   浮动部分的最大长度(仅适用于浮动类型)

9. max length of string

   字符串的最大长度

10. error state

    错误状态

11. readonly state

    只读状态

12. theme options

    主题选项

安装 (Installation)

npm i vue-number-smarty

or with yarn:

或与纱线：

yarn add vue-number-smarty

Then paste it in your main.js file:

然后将其粘贴到您的main.js文件中：

import VueNumberInput from 'vue-number-smarty';

Vue.use(VueNumberInput);

That's all!

就这样！

用法 (Usage)

道具 (Props)

align: {
  required: false,
  type: one of ['left', 'center', 'right', 'justify'],
  default: 'left',
},
placeholder: {
  required: false,
  type: String,
  default: 'Placeholder',
},
unsigned: {
  required: false,
  type: Boolean,
  default: false,
},
numberType: {
  required: true,
  type: one of ['integer', 'float'],
},
minValue: {
  required: false,
  type: Number,
  default: -9999999,
},
maxValue: {
  required: false,
  type: Number,
  default: 9999999,
},
step: {
  required: false,
  type: Number,
  default: 1,
},
/* only for integer | max length of string */
maxLen: {
  required: false,
  type: Number,
  default: 6,
},
/* max length of string before float part */
intPartMaxLen: {
  required: false,
  type: Number,
  default: 4,
},
/* max length of string after float part */
floatPartMaxLen: {
  required: false,
  type: Number,
  default: 2,
},
error: {
  required: false,
  type: Boolean,
  default: false,
},
readonly: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- border-bottom color -->
color: {
  required: false,
  type: String,
  default: 'rgba(0,0,0,.4)',
},
<!-- text-color -->
textColor: {
  required: false,
  type: String,
  default: 'rgba(0,0,0,.9)',
},
fontWeight: {
  required: false,
  type: String,
  default: 'normal',
},

款式 (Styles)

Component styles are override-friendly. So you can configure the desired field style.

组件样式是优先于重写的。 因此，您可以配置所需的字段样式。

The css classes of the component are listed here:

此处列出了该组件的css类：

.vue-number-input__wrapper
  .vue-number-input__input (.vue-number-input__input-error)
  .vue-number-input__arrows-wrapper
    .vue-number-input__arrow-up
    .vue-number-input__arrow-down

项目设置 (Project setup)

yarn install || npm i

编译和热重装以进行开发 (Compiles and hot-reloads for development)

yarn serve || npm run serve

Go to /src/main.js and do it:

转到/src/main.js并执行以下操作：

// import VueNumberInput from 'vue-number-smarty';
import VueNumberInput from '@/plugin-src/main.js';

Now you can go to the root folder and type:

现在，您可以转到根文件夹并输入：

yarn serve || npm run serve

You can work with /src/plugin-src/NumberInput.vue and see it in your browser.

您可以使用/src/plugin-src/NumberInput.vue并在浏览器中查看它。

编译并最小化生产 (Compiles and minifies for production)

Go to /src/plugin-src/ and do:

转到/ src / plugin-src /并执行以下操作：

npx bili

Then go to /src/plugin-src/dist/main.js and at the end replace

然后转到/src/plugin-src/dist/main.js并最后替换

module.exports

with

与

export default

翻译自: https://vuejsexamples.com/number-input-with-rich-functionality-for-vue-js/

vue js正则只输入数字