Input 输入框

基础用法

效果预览可直接操作下方示例

当type为input时可以不写,默认为input

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      type: 'input'
    },
    {
      label: '输入框',
      prop: 'input1'
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      value: '默认值'
    }
  ]
})
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      disabled: true
    }
  ]
})
</script>

可清空

效果预览可直接操作下方示例

使用clearable属性即可得到一个可清空的输入框,默认为true

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      clearable: false
    }
  ]
})
</script>

密码框

用于密码，通过将 type 属性的值指定为 password

效果预览可直接操作下方示例

使用showPassword属性即可得到一个可切换显示隐藏的密码框

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '密码框',
      prop: 'input',
      type: 'password',
      showPassword: true
    }
  ]
})
</script>

文本域

用于文本域，通过将 type 属性的值指定为 textarea,文本域高度可通过 rows 属性控制

效果预览可直接操作下方示例

通过设置maxRows和minRows，指定最小行数和最大行数,使得文本域的高度能够根据文本内容自动进行调整

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '文本域',
            prop: 'input',
            type: 'textarea',
            minRows: 3,
            maxRows: 5
          },
          {
            label: '文本域',
            prop: 'input1',
            type: 'textarea',
            rows: 5
          }
        ]
      }
    }
  }
}
</script>

尺寸

效果预览可直接操作下方示例

可通过size属性指定输入框的尺寸，还提供了large,small。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      size: 'large',
    },
    {
      label: '输入框',
      prop: 'input1',
      size: 'small'
    }
  ]
})

</script>

复合型输入框

带有图标标记输入类型

效果预览可直接操作下方示例

可以通过 prefixIcon 和 suffixIcon以及prepend和append属性在 input 组件首部和尾部增加显示图标

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
const form = ref({})
const option = ref({
  column: [
    {
      label: '输入框',
      prop: 'input',
      appendClick: () => {
        ElMessage.success('appendClick')
      },
      prependClick: () => {
        ElMessage.success('prependClick')
      },
      prepend: 'HTTP',
      append: 'COM'
    },
    {
      label: '输入框',
      prop: 'input1',
      suffixIcon: "el-icon-date",
      prefixIcon: "el-icon-search"
    }
  ]
})
</script>

输入长度限制

效果预览可直接操作下方示例

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。在使用 maxlength 属性限制最大输入长度的同时，可通过设置 showWordLimit 属性来展示字数统计。

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({})
const option = ref({
  column: [
    {
      label: '单文本框',
      prop: 'input',
      maxlength: 10,
      showWordLimit: true
    }, {
      label: '多文本框',
      prop: 'textarea',
      type: 'textarea',
      minRows: 3,
      maxRows: 5,
      maxlength: 20,
      span: 24,
      showWordLimit: true
    }
  ]
})
</script>

手机号输入

支持国际区号选择和手机号输入

效果预览可直接操作下方示例

通过设置type为phone来使用手机号输入框，支持defaultPhoneCode设置默认区号

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '手机号',
      prop: 'phone',
      type: 'phone'
    }
  ]
});
</script>

货币输入

支持货币符号、千分位分隔和小数精度控制

效果预览可直接操作下方示例

通过设置type为currency来使用货币输入框，支持currency设置货币类型，currencyPrecision设置小数精度

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '金额',
      prop: 'amount',
      type: 'currency',
      currency: 'CNY',
      currencyPrecision: 2
    },
    {
      label: '美元',
      prop: 'usd',
      type: 'currency',
      currency: 'USD',
      currencyUnit: '元'
    }
  ]
});
</script>

银行卡输入

支持银行卡号格式化显示和卡类型识别

效果预览可直接操作下方示例

通过设置type为bankCard来使用银行卡输入框，showBankCardType可显示银行卡类型

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '银行卡号',
      prop: 'bankCard',
      type: 'bankCard',
      showBankCardType: true
    }
  ]
});
</script>

身份证输入

支持身份证号校验和信息解析

效果预览可直接操作下方示例

通过设置type为idCard来使用身份证输入框，showIdCardInfo可显示身份证解析信息

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '身份证号',
      prop: 'idCard',
      type: 'idCard',
      showIdCardInfo: true
    }
  ]
});
</script>

邮箱输入

支持邮箱格式校验和后缀建议

效果预览可直接操作下方示例

通过设置type为email来使用邮箱输入框，showEmailSuffix可显示常用邮箱后缀建议

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '邮箱',
      prop: 'email',
      type: 'email',
      showEmailSuffix: true
    }
  ]
});
</script>

验证码输入

分段式验证码输入框

效果预览可直接操作下方示例

通过设置type为code来使用验证码输入框，codeLength可设置验证码长度

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '验证码',
      prop: 'code',
      type: 'code',
      codeLength: 6
    }
  ]
});
</script>

一次性密码输入

基于 Element Plus 的 OTP 输入框，适用于短信验证码、动态口令等场景。

效果预览可直接操作下方示例

通过设置 type 为 otp 或 input-otp 使用；validator 用于校验每个输入字符。

正在加载示例…

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

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({ otp: '' });
const option = {
  submitBtn: false,
  emptyBtn: false,
  column: [
    {
      label: '一次性验证码',
      prop: 'otp',
      type: 'otp',
      length: 6,
      otpType: 'filled',
      inputmode: 'numeric',
      validator: (value) => /^\d$/.test(value),
      finish: ({ value }) => ElMessage.success(`验证码输入完成：${value}`),
    },
  ],
};
</script>

车牌号输入

支持省份选择和车牌号输入

效果预览可直接操作下方示例

通过设置type为plate来使用车牌号输入框，defaultPlateProvince可设置默认省份

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '车牌号',
      prop: 'plate',
      type: 'plate',
      defaultPlateProvince: '京'
    }
  ]
});
</script>

IP地址输入

分段式IP地址输入框

效果预览可直接操作下方示例

通过设置type为ip来使用IP地址输入框

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: 'IP地址',
      prop: 'ip',
      type: 'ip'
    }
  ]
});
</script>

MAC地址输入

分段式MAC地址输入框

效果预览可直接操作下方示例

通过设置type为mac来使用MAC地址输入框，macSeparator可设置分隔符

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: 'MAC地址',
      prop: 'mac',
      type: 'mac',
      macSeparator: ':'
    }
  ]
});
</script>

社会信用代码输入

支持统一社会信用代码校验

效果预览可直接操作下方示例

通过设置type为uscc来使用社会信用代码输入框

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: '社会信用代码',
      prop: 'uscc',
      type: 'uscc'
    }
  ]
});
</script>