输入数字的控件_带控件的数字输入组件

输入数字的控件

Vue数值输入 (Vue Numeric Input)

Number input component based on Vue that is a replacement of native input number with optional control.

基于Vue的数字输入组件，它是用可选控件替换本机输入数字的组件。

View demo 查看演示 Download Source 下载源

安装 (Installation)

Install via NPM

通过NPM安装

$ npm install vue-numeric-input --save

$ npm install vue-numeric-input --save

Install via CDN

通过CDN安装

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric-input"></script>

全球 (Global)

Register VueNumericInput globally:

全局注册VueNumericInput：

import Vue from 'Vue';
import VueNumericInput from 'vue-numeric-input';

Vue.use(VueNumericInput)

本地 (Local)

Include the VueNumericInput directly into your component using import:

使用import将VueNumericInput直接包含到您的组件中：

import VueNumericInput from 'vue-numeric-input'

export default {
  components: {
    VueNumericInput
  }
}

用法 (Usage)

基本用法 (Basic usage)

<template>
  <div>
    <vue-numeric-input  v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
      };
    },
  };
</script>

道具： (PROPS:)

Name	Description	Type	Default	Options
name	Component name	String	-	-
value	Binding value	Number	-	-
placeholder	Input placeholder	String	-	-
min	Minimum allowed value	Number	-Infinity	-
max	Maximum allowed value	Number	Infinity	-
step	Incremental Step	Number	1	-
align	Alignment of Numeric Value	String	left	left, center, right
size	Component Size	String	Inherit	size in px, em, rem etc e.g. '20px'
precision	Number of decimals	Number	0	Integer value
controls	Enable/Disable Controls	Boolean	true	true/false
controlsType	Controls Type	String	plusminus	plusminus/updown
autofocus	Autofocus on Page Load	Boolean	false	true/false
readonly	Is Readonly	Boolean	false	true/false
disabled	Is Disabled	Boolean	false	true/false

名称	描述	类型	默认	选件
名称	组件名称	串	--	--
值	绑定值	数	--	--
占位符	输入占位符	串	--	--
分	最小允许值	数	-无限	--
最高	最大允许值	数	无限	--
步	增量步长	数	1个	--
对齐	数值对齐	串	剩下	左，中，右
尺寸	元件尺寸	串	继承	以px，em，rem等为单位的大小，例如“ 20px”
精确	小数位数	数	0	整数值
控制项	启用/禁用控件	布尔型	真正	真假
controlsType	控件类型	串	正负	正负
自动对焦	自动聚焦页面加载	布尔型	假	真假
只读	是只读的	布尔型	假	真假
残障人士	被禁用	布尔型	假	真假

活动： (EVENTS:)

Event Name	Description	Parameters
input	triggers when input	(newValue)
change	triggers when the value changes	(newValue)
blur	triggers when Input blurs	(event: Event)
focus	triggers when Input focus	(event: Event)

活动名称	描述	参量
输入	输入时触发	(newValue)
更改	值更改时触发	(newValue)
模糊	输入模糊时触发	(事件：事件)
焦点	输入焦点时触发	(事件：事件)

方法： (METHODS:)

Method	Description	Parameters
focus	focus the Input component	-
blur	blur the Input component	-

方法	描述	参量
焦点	关注输入组件	--
模糊	模糊输入组件	--

翻译自: https://vuejsexamples.com/number-input-component-with-controls/

输入数字的控件