# 数字输入框

# 普通用法

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [
         {
            label:'数字输入框',
            prop:'num',
            type:'number'
         }
        ]
      }
    }
  }
}
</script>

Expand Copy

# 隐藏控制器

设置controls属性可以隐藏控制器,接受一个Number

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [{
            label:'数字输入框',
            prop:'num',
            controls:false,
            type:'number'
         }
        ]
      }
    }
  }
}
</script>


Expand Copy

# 步数

设置step属性可以控制步长,接受一个Number

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [
         {
            label:'数字输入框',
            prop:'num',
            step:2,
            type:'number'
         }
        ]
      }
    }
  }
}
</script>

Expand Copy

# 严格步数

stepStrictly属性接受一个Boolean。如果这个属性被设置为true,则只能输入步数的倍数。

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [
         {
            label:'数字输入框',
            prop:'num',
            step:2,
            stepStrictly:true,
            type:'number'
         }
        ]
      }
    }
  }
}
</script>

Expand Copy

# 精度

设置precision属性可以控制数值精度,接收一个Number

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [
         {
            label:'数字输入框',
            prop:'num',
            precision:2,
            type:'number'
         }
        ]
      }
    }
  }
}
</script>

Expand Copy

# 按钮位置

设置 controlsPosition属性可以控制按钮位置。

<avue-form :option="option" v-model="form"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
        num:1
      },
      option: {
        column: [
         {
            label:'数字输入框',
            prop:'num',
            controlsPosition:'',
            type:'number'
         }
        ]
      }
    }
  }
}
</script>

Expand Copy
Last Updated: 8/5/2021, 9:04:57 AM