Number数字输入框

基础用法

通过将type属性的值指定为number

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>

export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '输入框',
            prop: 'input',
            type: 'input'
          },
          {
            label: '输入框',
            prop: 'input1'
          }
        ]
      }
    }
  }
}
</script>

默认值

value属性可以提供一个初始化的默认值

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '输入框',
            prop: 'input',
            value: '默认值'
          }
        ]
      }
    }
  }
}
</script>

禁用状态

disabled属性接受一个Boolean，设置为true即可禁用整个组件

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数字输入框',
            prop: 'num',
            type: 'number',
            disabled: true
          }
        ]
      }
    }
  }
}
</script>

最大值最小值

如果你只需要控制数值在某一范围内，可以设置min属性和max属性，不设置min和max时，最小值为 0。

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

步数

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

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

严格步数

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

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

隐藏控制器

设置controls属性是否使用控制按钮。

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

尺寸

可通过size属性指定输入框的尺寸，默认为small，还提供了large,small和mini三种尺寸。

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '数字输入框',
            prop: 'input',
            type: 'number',
            size: 'large',
          },
          {
            label: '数字输入框',
            prop: 'input1',
            type: 'number'
          },
          {
            label: '数字输入框',
            prop: 'input2',
            type: 'number',
            size: 'mini'
          }
        ]
      }
    }
  }
}
</script>

精度

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

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

按钮位置

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

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

# Number数字输入框

# 基础用法

# 默认值

# 禁用状态

# 最大值最小值

# 步数

# 严格步数

# 隐藏控制器

# 尺寸

# 精度

# 按钮位置