AsPhoneNumberInput

View source
带输入掩码格式化的电话号码输入框组件。

简介

MAsPhoneNumberInput 是一个电话号码输入框组件，通过输入掩码自动格式化号码，支持自定义掩码和区号前缀展示。

基于 Nuxt UI 的 Input 组件封装，使用 maska 处理输入掩码

用法

# 代表数字占位符，默认掩码为 ### #### ####、区号为 +86（中国大陆格式）。

+86
<script setup lang="ts">
const value = ref("")
</script>

<template>
  <MAsPhoneNumberInput v-model="value" />
</template>

dialCode 区号

通过 dialCode 在输入框前展示国家或地区区号：

+1
<template>
  <MAsPhoneNumberInput dial-code="+1" />
</template>

mask 掩码

通过 mask 适配不同国家的号码格式，# 代表数字占位符：

+86
<template>
  <MAsPhoneNumberInput mask="(###) ###-####" />
</template>

示例

融入UFieldGroup

与按钮置于 UFieldGroup 时共用尺寸、圆角和边框衔接，适合组合拨号操作：

+1
<template>
  <UFieldGroup size="xs">
    <MAsPhoneNumberInput dial-code="+1" />
    <UButton icon="i-lucide-phone-call" color="neutral" variant="subtle" />
  </UFieldGroup>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

mask'(###) ###-####'string

输入掩码格式，# 表示一个数字位。

dialCode'+86'string

区号前缀

idstring
namestring
placeholderstring

The placeholder text when the input is empty.

color'primary'"primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral"
variant'outline'"outline" | "soft" | "subtle" | "ghost" | "none"
size'md'"xs" | "sm" | "md" | "lg" | "xl"
autocomplete"on" | "off" | string & {}
autofocusDelaynumber
defaultValueT
modelModifiersModelModifiers
iconany

Display an icon based on the leading and trailing props.

avatarAvatarProps

Display an avatar on the left side.

leadingIconany

Display an icon on the left side.

trailingIconany

Display an icon on the right side.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

liststring
maxstring | number
maxlengthstring | number
minstring | number
minlengthstring | number
patternstring
readonlyfalse | true | "true" | "false"
stepstring | number
modelValueT
requiredboolean
autofocusboolean
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints.

leadingboolean

When true, the icon will be displayed on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

loadingboolean

When true, the loading icon will be displayed.

uiRecord<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; dialCode?: SlotClass; }

Emits

Event Type
update:modelValue[value: T]
blur[event: FocusEvent]
change[event: Event]

Slots

Slot Type
default{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }
trailing{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    asPhoneNumberInput: {
      slots: {
        base: '',
        leading: '',
        dialCode: ''
      },
      variants: {
        dialCode: {
          true: {
            base: 'ps-(--dial-code-length)',
            leading: 'pointer-events-none text-muted'
          }
        }
      }
    }
  }
})

Changelog

No recent changes

Agent Skills

通过 Claude Agent Skills 让 AI 编码代理按功能域正确生成 Movk Nuxt 代码。

ColorChooser

可视化颜色选择器组件。

Copyright © 2025 - 2026 YiXuan - MIT License