当前位置: 首页 > news >正文

深入解析:@scqilin/phone-ui 手机外观组件库

深入解析:@scqilin/phone-ui 手机外观组件库

@scqilin/phone-ui 手机外观组件库

实际项目演示,左边编辑,右边预览,完美。

写在最前面

最近开发一个移动端编辑器,我需要一个非常轻量的“手机壳”来把内容包起来用于预览与截图。于是做了 @scqilin/phone-ui:一个零依赖、用原生 TypeScript 写的手机外观渲染库,核心目标是简单、可复用、易适配。我的目标很明确:

  • 零依赖:能用在任何项目里,不管是 Vue、React 还是原生 JS。
  • 纯粹:只做“手机外观”这一件事,保持轻量。
  • 易用:API 简单,上手快。

✨ 特点

安装

npm install @scqilin/phone-ui

快速开始

把下面这段代码扔进你的项目,就能看到效果。

HTML 结构:

<div id="phone-demo" style="width: 500px; height: 900px;"></div>

JS 调用:

import { createPhoneUI } from '@scqilin/phone-ui';
const container = document.getElementById('phone-demo');
// 方式一:使用预设机型
createPhoneUI({
container,
phoneType: 'iphone16pro'
});
// 方式二:完全自定义
createPhoneUI({
container,
width: 400,
height: 800,
frameColor: '#1a1a1a',
screenColor: '#ffffff',
showButtons: true
});

设计思路与权衡

1. 为什么是原生库,而不是 Vue/React 组件?

最开始我也想直接写个 Vue 组件,但很快发现,把核心做成原生库更灵活。

2. 样式隔离

为了避免污染宿主页面的样式,我没有让用户引入 CSS 文件,而是通过 JS 动态创建 <style> 标签并注入到 head 中。所有样式都带上了 phone-ui- 前缀,并通过 CSS 变量暴露定制接口,比如 --phone-ui-frame-color

API 文档

createPhoneUI(options)

参数类型必填说明
containerHTMLElement渲染目标容器
phoneTypestring机型名称,支持 'iphone16', 'iphone16plus', 'iphone16pro', 'iphone16promax'
widthnumber自定义宽度(phoneType 存在时无效)
heightnumber自定义高度(phoneType 存在时无效)
frameColorstring边框颜色,默认 '#1a1a1a'
screenColorstring屏幕颜色,默认 '#ffffff'
showButtonsboolean是否显示侧边按钮,默认 true
borderRadiusnumber圆角大小,默认 30

支持的机型

机型phoneType尺寸 (宽×高)
iPhone 16'iphone16'402×874
iPhone 16 Plus'iphone16plus'440×950
iPhone 16 Pro'iphone16pro'402×874
iPhone 16 Pro Max'iphone16promax'440×950

常见问题

关于 Vue 的适配

我最初尝试在 Vue 项目里直接用这个原生库,但发现不太“顺手”:

  1. 插槽不好用:想用 Vue 的 <slot> 功能把内容放进“手机屏幕”里,操作起来很别扭。
  2. 生命周期问题:必须在 onMounted 之后手动调用,在 onBeforeUnmount 手动销毁,很繁琐。

为了解决这个问题,我另外写了一个轻量的 Vue 3 适配包,它做的事情很简单:

  • 把原生库的 API 封装成一个真正的 Vue 组件。
  • onMountedonBeforeUnmount 管理生命周期。
  • 把组件的默认插槽内容正确地渲染到手机屏幕里。

现在,在 Vue 里可以这样用:


<script setup>
// 假设你已经安装并配置了 vue 适配包
import PhoneUi from '@scqilin/phone-ui-vue';
</script>

这样就舒服多了。这个 Vue 适配包是独立的项目,你可以在这里找到它:

  • Vue 适配包仓库: https://github.com/scqilin/phone-ui-vue
  • 相关博文: https://juejin.cn/post/7536120422825033743

结语

如果你对这个小项目感兴趣,或者希望支持其他机型,欢迎在 GitHub 上提 Issue 或 PR!

http://www.hskmm.com/?act=detail&tid=20188

相关文章:

  • Tita项目与绩效一体化管理:驱动企业效能跃升的数字化引擎
  • 第七篇
  • labview打包应用
  • Day23抽象类
  • ES 是否有类似mysql explain的语句诊断用法
  • 让每次语音唤醒都可靠,公牛沐光重构可观测体系
  • 【2025-09-27】连岳摘抄
  • Python 爬虫 HTTPS 实战,requests httpx aiohttp 抓取技巧、证书问题与抓包调试全流程 - 教程
  • Codeforces 补题笔记
  • 使用 Python 基于Ollama构建个人私有知识库(AI生成)
  • Codeforces Round 1048 (Div. 2) 补题笔记
  • 【RabbitMQ】消息可靠性保障
  • React学习笔记(一)
  • Day23static详解
  • 11.prometheus监控之黑盒(blackbox)监控
  • Python虚拟环境及创建和使用虚拟环境(Python3)
  • 团队协作必备:16款在线协同编辑文档方案对比
  • 变电站、开闭所、环网柜、配电站
  • 为AI注入灵魂:一种面向人机黑箱的元人文治理新范
  • clickhouse
  • 2025.9.28——1黄
  • 聚焦 AI 应用基础设施,云栖大会 Serverless AI 全回顾
  • 删除 Ubuntu Nautilus 资源管理器侧栏的默认目录
  • 完整教程:整合与超越:论“开源AI智能名片链动2+1模式S2B2C商城小程序”对传统红人直播带货模式的升维
  • 2025 最新隔音板厂家权威推荐排行榜:聚焦实力厂商,阻尼 / 聚酯纤维等全品类适配与标杆案例解析室外/KTV/隔音板安装/沈阳/ 厂房隔音板厂家推荐
  • 2025 年医疗器械注册咨询公司最新权威推荐排行榜:TOP 级服务商全流程能力解析,助力企业高效合规拿证医疗器械注册咨询//二类医疗器械注册咨询/三类医疗器械注册咨询公司推荐
  • git合并最近的多个提交
  • Altium Designer 25.8.1 最新版安装指南
  • 2025 年最新推荐地坪源头厂商权威排行榜:聚焦环氧 / 聚氨酯 / 固化剂等多类型地坪,精选 TOP5 优质企业水性聚氨酯/环氧/密封固化剂地坪施工厂商推荐
  • 杂题笔记