Skip to content

InputNumber 数字输入框

基础用法

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
  },
  defaultValue: 1,
}

禁用状态

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    disabled: true,
  },
  defaultValue: 1,
}

步进

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    step: 2,
    'step-strictly':true,// 开启严格步进
  },
  defaultValue: 1,
}

精度

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    precision: 2,
  },
  defaultValue: 1,
}

不同的输入框尺寸

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    size: 'large', //'small'|'default'
  },
  defaultValue: 1,
}

按钮位置

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    'controls-position': 'right',  
  },
  defaultValue: 1,
}

带前缀和后缀

ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    step: 2,
  },
  slots: { 
    prefix: { 
      componentName: "span", 
      text: "¥", 
    }, 
  }, 
  defaultValue: 1,
}
ts
{
  id: "",
  componentName: "InputNumber",
  componentType: "form",
  formItemAttrs: {
    field: "",
    label: "",
  },
  attrs: {
    min: 1,
    max: 10,
    step: 2,
  },
  slots: { 
    suffix: { 
      componentName: "span", 
      text: "RMB", 
    }, 
  }, 
  defaultValue: 1,
}

Released under the MIT License.