009_InputNumber计数器

1. InputNumber计数器

1.1. InputNumber计数器, 仅允许输入标准的数字值, 可定义范围。

1.2. 计数器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	无	0
min	设置计数器允许的最小值	number	无	-Infinity
max	设置计数器允许的最大值	number	无	Infinity
step	计数器步长	number	无	1
step-strictly	是否只能输入step的倍数	boolean	无	false
precision	数值精度	number	无	无
size	计数器尺寸	string	large, small	无
disabled	是否禁用计数器	boolean	无	false
controls	是否使用控制按钮	boolean	无	true
controls-position	控制按钮位置	string	right	无
name	原生属性	string	无	无
label	输入框关联的label文字	string	无	无
placeholder	输入框默认placeholder	string	无	无

1.3. 计数器事件

事件名称	说明	回调参数
blur	在组件Input失去焦点时触发	(event: Event)
focus	在组件Input获得焦点时触发	(event: Event)
change	绑定值被改变时触发	currentValue, oldValue

1.4. 计数器方法

事件名称	说明
focus	在Input获得焦点
select	选中input中的文字

2. InputNumber计数器例子

2.1. 使用脚手架新建一个名为element-ui-inputnumber的前端项目, 同时安装Element插件。

2.2. 在components下创建InputNumber.vue 

<template>
  <div>
    <h1>基础用法</h1>
    <h4>要使用它, 只需要在el-input-number元素中使用v-model绑定变量即可, 变量的初始值即为默认值。</h4>
    <el-input-number v-model="base_num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

    <h1>禁用状态</h1>
    <h4>disabled属性接受一个Boolean, 设置为true即可禁用整个组件, 如果你只需要控制数值在某一范围内, 可以设置min属性和max属性, 不设置min和max时, 最小值为0。</h4>
    <el-input-number v-model="disabled_num" :disabled="true"></el-input-number>

    <h1>步数-允许定义递增递减的步数控制</h1>
    <h4>设置step属性可以控制步长, 接受一个Number。</h4>
    <el-input-number v-model="step_num" :step="2"></el-input-number>

    <h1>严格步数</h1>
    <h4>step-strictly属性接受一个Boolean。如果这个属性被设置为true, 则只能输入步数的倍数。</h4>
    <el-input-number v-model="strictly_num" :step="2" step-strictly></el-input-number>

    <h1>精度</h1>
    <h4>设置precision属性可以控制数值精度, 接收一个Number。precision的值必须是一个非负整数, 并且不能小于step的小数位数。</h4>
    <el-input-number v-model="precision_num" :precision="2" :step="0.1" :max="10"></el-input-number>

    <h1>尺寸</h1>
    <h4>额外提供了medium、small、mini 三种尺寸的数字输入框。</h4>
    <el-input-number v-model="size_num1"></el-input-number>
    <el-input-number size="medium" v-model="size_num2"></el-input-number>
    <el-input-number size="small" v-model="size_num3"></el-input-number>
    <el-input-number size="mini" v-model="size_num4"></el-input-number>

    <h1>按钮位置</h1>
    <h4>设置controls-position属性可以控制按钮位置。</h4>
    <el-input-number v-model="position_num" controls-position="right" :min="1" :max="10"></el-input-number>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_num: 1,
      disabled_num: 1,
      step_num: 5,
      strictly_num: 2,
      precision_num: 1,
      size_num1: 1,
      size_num2: 1,
      size_num3: 1,
      size_num4: 1,
      position_num: 1
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
  .el-input-number + .el-input-number {
    margin-left: 20px;
  }
</style>

2.4. 运行项目, 访问http://localhost:8080/#/InputNumber