phone-display-component
v1.0.0
Published
A web component for displaying phone numbers with toggle visibility - works in Vue, React, Angular, and vanilla JS
Maintainers
lizz_luoReadme
Phone Display Component
一个基于 Lit 的 Web Component，用于显示手机号码，默认隐藏中间4位，点击可切换显示完整号码。
安装
npm install phone-display-component特性
- 基于 Web Components 标准，可在任何框架中使用（Vue、React、Angular、原生 JS）
- 默认隐藏手机号中间4位（如 138****5678）
- 点击切换显示/隐藏
- 轻量级，基于 Lit
使用方式
原生 HTML / JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="module">
import 'phone-display-component';
</script>
</head>
<body>
<phone-display phone="13812345678"></phone-display>
</body>
</html>Vue 3
<template>
<phone-display :phone="phoneNumber"></phone-display>
</template>
<script setup>
import 'phone-display-component';
const phoneNumber = '13812345678';
</script>注意: Vue 需要配置忽略自定义元素：
// vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('-')
}
}
})
]
})React
import 'phone-display-component';
function App() {
return (
<phone-display phone="13812345678"></phone-display>
);
}
export default App;TypeScript 支持 (在项目中添加类型声明):
// global.d.ts
declare global {
namespace JSX {
interface IntrinsicElements {
'phone-display': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement> & { phone?: string },
HTMLElement
>;
}
}
}Angular
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }// app.component.ts
import 'phone-display-component';
@Component({
template: `<phone-display [attr.phone]="phoneNumber"></phone-display>`
})
export class AppComponent {
phoneNumber = '13812345678';
}API
属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| phone | String | '' | 要显示的手机号码（11位数字） |
本地开发
# 安装依赖
npm install
# 启动开发服务器
npm run dev发布
npm login
npm publishLicense
MIT