Input 输入框

基础表单文本输入组件，支持文本、数字、密码显隐切换、手机号区号前缀、短信验证码倒计时、错误校验与多行文本域等丰富功能。

---

代码示例

1. 基础用法 (Basic)

使用 v-model 双向绑定输入文本，设置 clearable 显示一键清除按键。

<template>
  <mu-input v-model="username" label="用户名" placeholder="请输入用户名" clearable />
  <mu-input v-model="email" label="邮箱地址" prefix-icon="mail" placeholder="请输入邮箱地址" clearable />
</template>

---

2. 密码输入与明暗切换 (Password)

设置 type="password" 自动开启密码掩码与右侧眼睛点击明文/密文切换。

<template>
  <mu-input
    v-model="password"
    type="password"
    label="登录密码"
    prefix-icon="lock"
    placeholder="请输入密码"
    clearable
  />
</template>

---

3. 手机号与验证码倒计时 (Phone & Code)

设置 phone-prefix 显示 +86 区号前缀；设置 send-code 开启 60 秒原生短信验证码倒计时胶囊按钮。

<template>
  <mu-input
    v-model="phone"
    type="tel"
    label="手机号码"
    required
    phone-prefix
    placeholder="请输入手机号"
    clearable
  />

  <mu-input
    v-model="code"
    type="code"
    label="短信验证码"
    required
    prefix-icon="shield"
    send-code
    placeholder="请输入 6 位验证码"
    @send-code="handleSendCode"
  />
</template>

<script setup>
const handleSendCode = () => {
  console.log('触发发送验证码')
}
</script>

---

4. 标签位置对齐 (Label Position)

设置 label-position="left" 实现 Label 标题在左侧与输入框同行排列。

<template>
  <mu-input v-model="realname" label="真实姓名" label-position="left" required />
  <mu-input v-model="company" label="公司名称" label-position="left" />
</template>

---

5. 错误提示与字符计数器 (Error & Counter)

设置 error 与 error-message 显示标红校验警告，设置 counter 与 maxlength 实时显示字数限制。

<template>
  <mu-input
    v-model="account"
    label="账号名"
    error
    error-message="账号名不能包含非法特殊字符"
  />

  <mu-input
    v-model="sign"
    label="个人签名"
    :maxlength="20"
    counter
  />
</template>

---

6. 多行文本域 (Textarea)

设置 type="textarea" 转换为多行富文本输入区域。

<template>
  <mu-input
    v-model="remark"
    type="textarea"
    label="详细备注说明"
    placeholder="请输入备注说明"
    :maxlength="200"
    counter
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	绑定当前输入的文本值	String | Number	-	''
type	输入框类型	String	text | number | digit | tel | password | code | textarea	'text'
shape	围栏边框形状	String	radius | square | round	'radius'
label	输入框标题	String	-	''
labelPosition	标题布局位置	String	top | left	'top'
labelWidth	左侧标题宽度	String	-	'160rpx'
required	是否展示必填红色星号	Boolean	true | false	false
placeholder	占位文本	String	-	'请输入'
disabled	是否禁用	Boolean	true | false	false
clearable	是否显示一键清除图标	Boolean	true | false	false
maxlength	最大输入字符数	Number	-	-1
counter	是否显示字数限制计数器	Boolean	true | false	false
error	是否标红错误状态	Boolean	true | false	false
errorMessage	底部错误提示文本	String	-	''
prefixIcon	前置矢量图标名称	String	-	''
suffixIcon	后置矢量图标名称	String	-	''
filled	是否开启背景填充模式	Boolean	true | false	false
autoHeight	多行文本域是否自动增高	Boolean	true | false	false
showPasswordToggle	密码框模式下是否显示小眼睛明暗切换	Boolean	true | false	true
codeText	倒计时按键文案	String	-	'发送验证码'
useKeyboard	是否调用组件内置虚拟键盘	Boolean	true | false	false
keyboardMode	虚拟键盘模式	String	number | card | car	'number'
keyboardTitle	虚拟键盘标题	String	-	''
phonePrefix	是否显示 +86 手机号区号前缀	Boolean	true | false	false
sendCode	是否显示验证码倒计时按键	Boolean	true | false	false
codeSeconds	验证码倒计时秒数	Number	-	60

---

插槽说明 (Slots)

插槽名	说明
prefix	自定义输入框内部最左侧元素
suffix	自定义输入框内部最右侧元素
label	自定义标题 Label 区域

---

事件说明 (Events)

事件名	说明	回调参数
update:modelValue	输入文本改变时触发	(value: String)
input	原生输入时触发	(value: String)
focus	获取焦点时触发	(event: Event)
blur	失去焦点时触发	(event: Event)
clear	点击清除图标时触发	-
send-code	点击发送验证码时触发	-

---

实例方法 (Expose Methods)

方法名	说明
startCountdown()	手动启动发送验证码倒计时