Vue自定义编号输入 - vue-input-number

Vue自定义编号输入 - vue-input-number
插件名称 vue-input-number
发布时间 2020年12月7日
插件作者 joseluisq

Vue.js 2的自定义输入数字(输入微调器)组件。

安装和下载:

# Yarn
$ yarn add vue-input-number

# NPM
$ npm install vue-input-number --save

用法

<template>

    <input-number
        :step="1"
        :min="10"
        :max="100"
        :maxlength="3"
        :inputclass="'v-input-number-input'"
        @onInputNumberChange="onChange"></input-number>

</template>

<script>
  export default {
    methods: {
        onChange (value) {
            console.log(value)
        }
    }
  }
</script>

在您的输入应用程序中:

const Vue = require('vue')

Vue.component('vue-input-number', require('vue-input-number'))

const app = new Vue({
  el: '#app'
})

属性

  • value:为输入添加默认值。
  • step:用于递增和递减输入数字值的步进值。
  • min:输入数字的最小值。min如果placeholder为空,则仅用作占位符。
  • max:输入数字的最大值。
  • maxlength:输入数字的最大长度。
  • keydown:启用递增或递减值的keydown。
  • mousedown:为增加或减少值启用mousedown。
  • integer 仅启用整数值。
  • placeholder 设置输入占位符。如果placeholder具有某个值min,则不用作占位符。
  • inputclass:为输入元素设置不同的类。例如,如果使用Bootstrap默认输入类,则可以设置:inputclass="'form-control'"form-control在输入元素中使用类。

事件

@onInputNumberChange

值更改时将触发事件。