Vue 3 手机号格式化组件

一个优雅的 Vue 3 手机号格式化组件，支持自动格式化、数字验证和美观的边框效果。

特性

• 📱 自动格式化手机号为 AAA-BBBB-CCCC 格式
• 🎨 每个数字都有独立的边框效果
• 🔒 只允许输入数字
• 📦 支持 ESM 和 CommonJS 两种模块格式
• 🔍 完整的 TypeScript 类型支持
• 🎯 零依赖，轻量级

安装

npm install vue3-phone-formatter
# 或者
yarn add vue3-phone-formatter
# 或者
pnpm add vue3-phone-formatter

使用方法

全局注册

import { createApp } from 'vue'
import { PhoneFormatter } from 'vue3-phone-formatter'

const app = createApp(App)
app.component('PhoneFormatter', PhoneFormatter)
app.mount('#app')

局部注册

<template>
  <PhoneFormatter v-model="phoneNumber" />
</template>

<script setup>
import { PhoneFormatter } from 'vue3-phone-formatter'
import { ref } from 'vue'

const phoneNumber = ref('')
</script>

自定义样式

你可以通过覆盖以下 CSS 类来自定义样式：

.phone-formatter {
  /* 容器样式 */
}

.phone-input {
  /* 输入框样式 */
}

.digit-box {
  /* 数字框样式 */
}

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | modelValue | String | '' | 输入值，支持 v-model |

事件

| 事件名 | 参数 | 描述 | |--------|------|------| | update:modelValue | (value: string) | 当输入值改变时触发 |

示例

基础用法

<template>
  <div class="app">
    <h1>手机号格式化示例</h1>
    <PhoneFormatter v-model="phoneNumber" />
    <p>当前输入：{{ phoneNumber }}</p>
  </div>
</template>

<script setup>
import { PhoneFormatter } from 'vue3-phone-formatter'
import { ref } from 'vue'

const phoneNumber = ref('')
</script>

<style>
.app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>

自定义样式

<template>
  <PhoneFormatter class="custom-formatter" />
</template>

<style>
.custom-formatter .digit-box {
  background-color: #f0f0f0;
  border-color: #666;
  color: #333;
}

.custom-formatter .phone-input {
  border: 2px solid #666;
  border-radius: 8px;
  padding: 8px;
}
</style>

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

作者

[你的名字]

更新日志

1.0.0

• 初始版本发布
• 支持基本的手机号格式化功能
• 添加边框效果
• 支持 ESM 和 CommonJS
• 添加 TypeScript 支持