@ desource/ phone- mask- nuxt
与 Google 的 libphone 数字数据进行电话输入的 Nuxt 模块
Drop-in Nuxt模块,带有自动进口,SSF支持和零配置.
升级到 2. 0. 0 之前,审查 1.7.0的移徙 用于断开更改和需要更新.
* 特性
- 🎯 0 配置 ——工程出炉
- 🔄 自动进口 构件、指令和默认类型
- 🌐 安保部门支助 —— 说
PhoneInput在服务器上使 HTML 格式化,并在浏览器中使水合物格式化 - 🎨 可样式 ——带出自己的风格或使用默认
- 🔧 类型脚本 ——满打字
- ⚡ 优化 - 树摇和代码分割
* 安装
npm install @desource/phone-mask-nuxt
# or
yarn add @desource/phone-mask-nuxt
# or
pnpm add @desource/phone-mask-nuxt
QQ 设置
将模块添加到您的 nuxt.config.ts数字 :
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt']
});
就这样! 组件、指令和相关口罩类型现已自动进口. 您可以通过模块选项额外启用帮助器/可组合自动导入.
使用量
基本构成部分
<template>
<div>
<PhoneInput v-model="phone" country="US" />
<p>Phone: {{ phone }}</p>
</div>
</template>
<script setup lang="ts">
const phone = ref('');
</script>
用自动检测
<template>
<PhoneInput v-model="phone" detect @country-change="onCountryChange" />
</template>
<script setup>
const phone = ref('');
const onCountryChange = (country) => {
console.log('Detected country:', country.name);
};
</script>
使用该指令
<template>
<div class="phone-wrapper">
<select v-model="selectedCountry">
<option value="US">🇺🇸 +1</option>
<option value="GB">🇬🇧 +44</option>
<option value="DE">🇩🇪 +49</option>
</select>
<input
v-phone-mask="{
country: selectedCountry,
onChange: handleChange
}"
class="phone-input"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { PMaskPhoneNumber } from '#imports';
const selectedCountry = ref('US');
const phone = ref<PMaskPhoneNumber>({
full: '',
fullFormatted: '',
digits: ''
});
const handleChange = (nextPhone: PMaskPhoneNumber) => {
phone.value = nextPhone;
};
</script>
SSR + 在实践中的自动进口
@desource/phone-mask-nuxt 调制 PhoneInput 放在服务器上,在浏览器中把它水化。 浏览器 locale,系统主题,国家检测,下架后初始化. 过 locale, (中文(简体) ), theme,以及 country 明确控制初始服务器的外观.
<script setup lang="ts">
const phone = ref('');
const valid = ref(false);
</script>
<template>
<!-- Auto-imported: no explicit component import required -->
<PhoneInput id="phone" name="phone" v-model="phone" country="US" @validation-change="valid = $event" />
<p v-if="valid">✓ Ready to submit</p>
</template>
后端有效载荷( Raw Digits)
<script setup lang="ts">
import type { PMaskPhoneNumber } from '#imports';
const phoneDigits = ref('');
const handlePhoneChange = async (phone: PMaskPhoneNumber) => {
await $fetch('/api/profile/phone', {
method: 'POST',
body: {
phoneDigits: phone.digits, // unformatted value for backend
phoneFull: phone.full // optional full number with country code
}
});
};
</script>
<template>
<PhoneInput v-model="phoneDigits" country="US" @change="handlePhoneChange" />
</template>
自动导入辅助工具 + 可编译
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],
phoneMask: {
// Disable auto-imported styles, component, and directive if you don't need them
css: false,
component: false,
directive: false,
// And enable only needed auto-imports
helpers: true,
composable: true
}
});
然后在SFCs中直接使用,无需手工导入:
<script setup lang="ts">
const value = ref('');
const selectedCountry = ref('US');
const { inputRef, setCountry } = usePhoneMask({
value,
onChange: (digits) => (value.value = digits),
country: selectedCountry
});
const setGermany = () => {
setCountry('DE');
};
</script>
<template>
<input ref="inputRef" type="tel" />
<button @click="setGermany">Use Germany</button>
<p>Code for DE: {{ PMaskHelpers.MasksMap.DE.code }}</p>
</template>
QQ 配置
模块选项
配置模块于 nuxt.config.ts数字 :
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],
phoneMask: {
// Import styles automatically
css: true, // Default: true
// Register PhoneInput component
component: true, // Default: true
// Register v-phone-mask directive
directive: true, // Default: true
// Register mask-related TypeScript types
types: true, // Default: true
// Register shared helper namespace + directive helper
helpers: false, // Default: false
// Register usePhoneMask composable
composable: false // Default: false
}
});
启用帮助和可编译自动导入
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],
phoneMask: {
helpers: true,
composable: true
}
});
自定义样式
选项1: 禁用自动 CSS 导入
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],
phoneMask: {
css: false // Don't auto-import styles
}
});
然后按需要手动导入 :
<style>
@import '@desource/phone-mask-vue/assets/lib.css';
/* Your custom overrides */
.desource-phone-input {
--pi-border: #your-color;
}
</style>
备选案文2:覆盖 CSS 变量
<style>
.desource-phone-input,
.desource-phone-dropdown {
--pi-bg: #f9fafb;
--pi-border: #e5e7eb;
--pi-border-focus: #3b82f6;
--pi-fg: #111827;
}
</style>
QQ 类型脚本
该模块提供自动TypeScript支持. 您可以导入 Nuxt 注册类型 #imports数字 :
import type {
PCountryKey,
PMaskBase,
PMaskBaseMap,
PMask,
PMaskMap,
PMaskWithFlag,
PMaskWithFlagMap,
PMaskFull,
PMaskFullMap,
PMaskPhoneNumber
} from '#imports';
实例
形式整合
<template>
<form @submit.prevent="handleSubmit">
<div>
<label for="name">Name</label>
<input id="name" v-model="form.name" type="text" />
</div>
<div>
<label for="phone">Phone</label>
<PhoneInput id="phone" v-model="form.phone" country="US" @validation-change="phoneValid = $event" />
</div>
<button type="submit" :disabled="!phoneValid">Submit</button>
</form>
</template>
<script setup>
const form = reactive({
name: '',
phone: ''
});
const phoneValid = ref(false);
const handleSubmit = () => {
console.log('Form data:', form);
};
</script>
与 Pinia 仓库
// stores/user.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
phoneDigits: '',
country: 'US'
}),
actions: {
setPhoneDigits(phone: string) {
this.phoneDigits = phone;
},
setCountry(id: string) {
this.country = id;
}
}
});
<template>
<PhoneInput
:model-value="userStore.phoneDigits"
:country="userStore.country"
@update:model-value="userStore.setPhoneDigits"
@country-change="userStore.setCountry($event.id)"
/>
</template>
<script setup>
const userStore = useUserStore();
</script>
多步骤形式
<template>
<div>
<div v-if="step === 1">
<h2>Step 1: Contact Info</h2>
<PhoneInput v-model="formData.phone" country="US" @validation-change="phoneValid = $event" />
<button @click="nextStep" :disabled="!phoneValid">Next</button>
</div>
<div v-if="step === 2">
<h2>Step 2: Verification</h2>
<p>We'll send a code to: {{ formData.phone }}</p>
<button @click="prevStep">Back</button>
<button @click="submit">Send Code</button>
</div>
</div>
</template>
<script setup>
const step = ref(1);
const phoneValid = ref(false);
const formData = reactive({
phone: ''
});
const nextStep = () => {
if (phoneValid.value) step.value++;
};
const prevStep = () => {
step.value--;
};
const submit = async () => {
// Send verification code
};
</script>
i18n 整合
<template>
<PhoneInput v-model="phone" :locale="$i18n.locale" :search-placeholder="$t('phone.searchPlaceholder')" />
</template>
<script setup>
const { locale, t } = useI18n();
const phone = ref('');
</script>
自动进口
默认( 没有额外选项), Nuxt 自动导入 :
构成部分
PhoneInput——主要电话输入部分
指令
vPhoneMask- 电话口罩指令
类型
PCountryKeyPMaskBase, (中文(简体) ),PMaskBaseMapPMask, (中文(简体) ),PMaskMapPMaskWithFlag, (中文(简体) ),PMaskWithFlagMapPMaskFull, (中文(简体) ),PMaskFullMapPMaskPhoneNumber
启用 phoneMask.helpers: true 自动导入 :
vPhoneMaskSetCountry——按程序设定的指令国家PMaskHelpers- 核心成套设施和掩码数据@desource/phone-mask-vue/core
启用 phoneMask.composable: true 自动导入 :
usePhoneMask
从 Vue 插件迁移
如果您要从 Vue 插件迁移:
在此之前:
// main.ts
import PhoneMaskPlugin from '@desource/phone-mask-vue';
import '@desource/phone-mask-vue/assets/lib.css';
app.use(PhoneMaskPlugin);
之后:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt']
});
组件不需要更改 !
包含什么
PhoneInput组件(默认自动导入)vPhoneMask指令( 默认自动导入)- 与面具相关的类型Script类型(默认自动导入)
- 默认样式( 默认自动导入, 可禁用)
vPhoneMaskSetCountry财务报告和审定财务报表PMaskHelpers(可选择通过phoneMask.helpers(中文(简体) )usePhoneMask(可选择通过phoneMask.composable(中文(简体) )
有关软件包
- @ desource/ phone- mask (英语) - 核心图书馆
- @ desource/ phone- mask- vue - Vue 3部分
- @ desource/ phone- mask- angular (英语) - 角装订
- @ desource/ phone- mask- react - 反应约束
- @ desource/ phone- massk- svelte (英语) - 丝绒装订
许可证
麻省理工学院 2026 来源实验室
捐款
见 贡献指南 用于开发、测试和出版检查.
由 Q 制作 来源实验室