ui-form-input 输入框组

版本：v2.3.11

输入框组件用于接收用户输入，支持多种类型和自定义样式，如文本、密码、数字等

基本使用

<template>
  <div class="form-input-demo">
    <ui-form-input v-model="value" placeholder="请输入内 />
    <p>输入的值：{{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
</script>

<style scoped>
.form-input-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Props

参数	类型	默认值	说明
modelValue	String/Number	-	输入框的
type	String	'text'	输入框类型，可选值：text、password、number、email、tel、url
placeholder	String	-	占位符文
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
maxlength	Number	-	最大输入长
minlength	Number	-	最小输入长
size	String	'medium'	输入框大小，可选值：small、medium、large
clearable	Boolean	false	是否显示清除按钮
prefixIcon	String	-	前缀图标
suffixIcon	String	-	后缀图标
autofocus	Boolean	false	是否自动聚焦

Events

事件	说明	回调参数
change	输入值变化时触发	(value: String/Number) 当前输入
input	实时输入时触	(value: String/Number) 当前输入
focus	输入框获得焦点时触发	(event: Event) 焦点事件对象
blur	输入框失去焦点时触发	(event: Event) 失去焦点事件对象
clear	点击清除按钮时触	-

示例

不同类型的输入框

<template>
  <div class="form-input-demo">
    <ui-form-input v-model="textValue" placeholder="文本输入" />
    <ui-form-input v-model="passwordValue" type="password" placeholder="密码输入" />
    <ui-form-input v-model="numberValue" type="number" placeholder="数字输入" />
    <ui-form-input v-model="emailValue" type="email" placeholder="邮箱输入" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const textValue = ref('');
const passwordValue = ref('');
const numberValue = ref('');
const emailValue = ref('');
</script>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/form/form-input/form-input