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

總結

以上是生活随笔為你收集整理的009_InputNumber计数器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。