·参数说明
		1.el-input-number的使用
		2.禁用按钮 disabled
		3.设置 step
		4.设置严格 step step-strictly
		5.精度设置 precision
		6.按钮大小 size
		7.按钮位置 controls-position
·效果图

在这里插入图片描述

	<template>
  <div>
    <div style="width:80%;margin:0 auto">
       <!-- el-input-number -->
        <el-input-number v-model='number' @change='handleChange' :min='1' :max='10'></el-input-number>
        <!-- disabled -->
        <el-input-number v-model='number' @change='handleChange' :min='1' :max='10' disabled></el-input-number>
        <!-- step -->
        <el-input-number v-model='stepNumber' :step='2'></el-input-number>
        <!-- step + step-strictly -->
        <el-input-number v-model='stepNumber' :step='2' step-strictly></el-input-number>
        <!-- precision必须是一个非负整数,并且不能小于step的小数位数 -->
        <el-input-number v-model='floatNumber' :precision='2' :step='0.02'></el-input-number>
        <!-- size -->
        <el-input-number v-model='floatNumber' :precision='2' :step='0.1' size='mini'></el-input-number>
        <!-- controls-position -->
        <el-input-number v-model='number' controls-position='right' :min='1' :max='10'></el-input-number>
        <el-input-number v-model="number" :controls='false' :min="1" :max="10" ></el-input-number>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1,
      stepNumber: 0,
      floatNumber: 1,
    }
  },
}
</script>


/deep/ .el-input-number .el-input__inner {
  text-align: left; //位置居左
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐