数字输入框

普通用法

<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 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 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 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 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 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 Copy