InputNumber 数字输入框

基础用法

<template>
  <div>
    <plv-input-number
      :min="0"
      :max="10"
      v-model="num" />
  </div>
</template>

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

显示代码

禁言 & 只读状态

<template>
  <div>
    <plv-input-number v-model="num1" disabled></plv-input-number>
    <plv-input-number v-model="num2" readonly></plv-input-number>
  </div>
</template>

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

显示代码

步数

<template>
  <div>
    <plv-input-number
      :step="2"
      v-model="num" />
  </div>
</template>

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

显示代码

精度

<template>
  <div>
    <plv-input-number
      :precision="2"
      v-model="num" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: 1.22
      };
    }
  };
</script>

显示代码

尺寸

<template>
  <div class="flex-a-c">
    <plv-input-number v-model="num"></plv-input-number>
    <plv-input-number v-model="num" size="medium"></plv-input-number>
    <plv-input-number v-model="num" size="small"></plv-input-number>
    <plv-input-number v-model="num" size="mini"></plv-input-number>
  </div>
</template>

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

显示代码

只允许控制器操作

设置`onlyControls`为true后，输入框无法手动输入，只能通过右侧控制器来进行操作。

<template>
  <div>
    <plv-input-number
      controls
      only-controls
      v-model="num" />
  </div>
</template>

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

显示代码

失焦检测

输入框失焦后，判断绑定值为空时，自动设为传入的最小值。

<template>
  <div>
    <plv-input-number
      blur-to-min
      :min="0"
      :max="50"
      :controls="false"
      v-model="num" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: 20
      };
    }
  };
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Number	-	-
placeholder	输入框占位文本	String	-	-
size	尺寸	String	medium small mini	-
autocomplete	即 input 元素的 autocomplete	String	-	off
disabled	是否禁用输入框	Boolean	-	false
readonly	输入框是否只读	Boolean	-	false
prefixIcon	输入框头部图标	String	-	-
status	输入框状态	String	-	-
min	输入框允许的最小值	Number	-	0
max	输入框允许的最大值	Number	-	999999999
step	输入框步长	Number	-	1
precision	数值精度，-1为无限制	Number	-	-1
controls	是否显示控制器	Number	-	false
onlyControls	是否只允许控制器操作	Number	-	false
blur-to-enter	按下回车后是否自动失焦	Boolean	-	false

Events

事件名称	说明	回调参数
focus	在 Input 获得焦点时触发	(event: Event)
blur	在 Input 失去焦点时触发	(event: Event)
change	在 Input 值改变时触发	value
increase	点击增加时触发	value
decrease	点击下降时触发	value
enter	输入框回车后出发	(event: Event)

Slots

name	说明
prepend	输入框前置内容
append	输入框后置内容
prefix	输入框头部内容