快捷導(dǎo)航

Vue3手機(jī)外觀組件庫超詳細(xì)代碼示例

更新時間：2026年05月23日 08:56:45 作者：早發(fā)白帝城

vue作為一款深受廣大群眾喜歡的前端框架,擁有眾多優(yōu)秀的開源UI組件庫,這篇文章主要介紹了Vue3手機(jī)外觀組件庫的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

前一段時間開發(fā)了一個移動端畫布編輯器，為了方便在真機(jī)上預(yù)覽效果，抽離了手機(jī)外觀組件庫。這個庫可以幫助開發(fā)者快速創(chuàng)建手機(jī) UI 模擬器，支持多種機(jī)型和靈活的配置選項(xiàng)。

一個專為 Vue 3 設(shè)計的手機(jī)外觀組件庫，使用 TypeScript 開發(fā)，支持多機(jī)型預(yù)設(shè)和完全自定義外觀。

?? 本組件所有機(jī)型外觀均為演示效果，并非真實(shí)手機(jī)尺寸，僅供開發(fā)測試參考！

特點(diǎn)

?? 專為 Vue 3 設(shè)計，完美支持 Composition API
?? 內(nèi)置 iPhone 16 全系列機(jī)型預(yù)設(shè)
?? 靈活配置系統(tǒng) - 預(yù)設(shè)機(jī)型可覆蓋配置，自定義機(jī)型完全可控
?? 支持插槽內(nèi)容 - 可直接在組件內(nèi)放置其他 Vue 組件
? 靈動島類型 - 支持多種靈動島樣式，可擴(kuò)展
?? TypeScript 支持，提供完整類型定義
?? 零依賴，僅依賴 Vue 3

演示

實(shí)際項(xiàng)目演示，左邊編輯，右邊預(yù)覽，完美。

安裝

npm install @scqilin/phone-ui-vue

快速開始

全局注冊（推薦）

// main.ts
import { createApp } from 'vue'
import PhoneUIVue from '@scqilin/phone-ui-vue'
import App from './App.vue'

const app = createApp(App)
app.use(PhoneUIVue)
app.mount('#app')

局部引入

// 組件內(nèi)使用
import { PhoneUI } from '@scqilin/phone-ui-vue'

使用示例

預(yù)設(shè)機(jī)型

<template>
  <PhoneUI 
    phoneType="iphone16pro"
    frameColor="#111"
    screenColor="#fff"
    :showButtons="true"
  >
    <!-- 在這里放置你的應(yīng)用內(nèi)容 -->
    <div class="my-app">
      <header>我的應(yīng)用頭部</header>
      <main>
        <h1>歡迎使用</h1>
        <p>這里是應(yīng)用內(nèi)容</p>
        <MyComponent />
      </main>
      <footer>底部導(dǎo)航</footer>
    </div>
  </PhoneUI>
</template>

預(yù)設(shè)機(jī)型 + 覆蓋配置

<template>
  <PhoneUI 
    phoneType="iphone16"
    :width="400"
    :borderRadius="30"
    frameColor="#333"
    notchType="0"
  >
    <!-- 使用 iPhone 16 預(yù)設(shè)，但覆蓋部分配置 -->
    <MyCustomContent />
  </PhoneUI>
</template>

完全自定義機(jī)型

<template>
  <PhoneUI 
    phoneType="custom"
    :width="375"
    :height="812"
    frameColor="#003e9f"
    screenColor="#f0f8ff"
    :showButtons="true"
    :borderRadius="25"
    :frameWidth="12"
    notchType="1"
  >
    <CustomAppContent />
  </PhoneUI>
</template>

創(chuàng)建新機(jī)型

<template>
  <PhoneUI 
    phoneType="xiaomi14"
    :width="360"
    :height="780"
    :borderRadius="20"
    notchType="0"
    :buttonConfig="{
      left: [{ top: 100, height: 30 }],
      right: [{ top: 120, height: 50 }]
    }"
  >
    <XiaomiContent />
  </PhoneUI>
</template>

API 文檔

Props

屬性	類型	默認(rèn)值	說明
phoneType	`string`	`'custom'`	手機(jī)機(jī)型標(biāo)識，支持預(yù)設(shè)機(jī)型或自定義名稱
width	`number`	`393`	屏幕寬度，可覆蓋預(yù)設(shè)配置
height	`number`	`852`	屏幕高度，可覆蓋預(yù)設(shè)配置
frameColor	`string`	`'#1a1a1a'`	手機(jī)邊框顏色
screenColor	`string`	`'#ffffff'`	屏幕背景顏色
showButtons	`boolean`	`true`	是否顯示側(cè)邊按鈕
borderRadius	`number`	`22`	邊框圓角大小，可覆蓋預(yù)設(shè)配置
frameWidth	`number`	`16`	邊框?qū)挾龋ò聊缓谶?物理邊框）
notchType	`string`	`'0'`	靈動島類型：'0'無靈動島，'1'橢圓形靈動島
buttonConfig	`object`	`{left:[], right:[]}`	按鈕配置，可覆蓋預(yù)設(shè)配置

插槽

名稱	說明
default	屏幕內(nèi)容區(qū)域，可放置任意 Vue 組件

支持的機(jī)型

機(jī)型	phoneType 值	屏幕尺寸	靈動島
iPhone 16	`'iphone16'`	393×852	?
iPhone 16 Plus	`'iphone16plus'`	430×932	?
iPhone 16 Pro	`'iphone16pro'`	402×874	?
iPhone 16 Pro Max	`'iphone16promax'`	440×956	?
自定義機(jī)型	`'custom'` 或任意字符串	自定義	可選

使用說明

配置優(yōu)先級

組件使用智能配置合并系統(tǒng)：

用戶傳入的 props（最高優(yōu)先級）
預(yù)設(shè)機(jī)型配置（如果 phoneType 在庫中存在）
默認(rèn)配置（兜底配置）

預(yù)設(shè)機(jī)型模式

當(dāng)設(shè)置 phoneType 為庫中存在的機(jī)型時，會自動使用該機(jī)型的預(yù)設(shè)配置
同時可以傳入其他 props 來覆蓋預(yù)設(shè)配置的部分參數(shù)
適合在標(biāo)準(zhǔn)機(jī)型基礎(chǔ)上微調(diào)的場景

自定義機(jī)型模式

當(dāng)設(shè)置 phoneType 為 'custom' 或庫中不存在的值時，使用默認(rèn)配置
可以傳入任意 props 來覆蓋默認(rèn)配置
適合完全自定義或創(chuàng)建新機(jī)型的場景

靈動島類型

notchType: '-' - 無
notchType: '0' - 小圓點(diǎn)（默認(rèn)）
notchType: '1' - 橢圓形靈動島（iPhone 16 系列）
notchType: '2' - 小下巴
未來將支持更多類型

按鈕配置

buttonConfig: {
  left: [
    { top: 100, height: 30 }, // 按鈕位置和高度
    { top: 150, height: 40 }
  ],
  right: [
    { top: 120, height: 50 }
  ]
}

插槽內(nèi)容

可在 <PhoneUI> 標(biāo)簽內(nèi)放置任意 Vue 組件或 HTML 內(nèi)容
內(nèi)容會自動填充到手機(jī)屏幕區(qū)域
支持完整的 Vue 響應(yīng)式特性和事件處理

樣式自定義

組件使用 scoped CSS，不會影響全局樣式。如需深度自定義樣式，可以通過以下方式：

<style>
/* 自定義屏幕內(nèi)容樣式 */
.phone-content {
  /* 您的自定義樣式 */
}
</style>

開發(fā)與構(gòu)建

# 克隆項(xiàng)目
git clone https://github.com/scqilin/phone-ui-vue.git

# 安裝依賴
npm install

# 開發(fā)模式
npm run dev

# 構(gòu)建庫文件
npm run build:lib

# 預(yù)覽
npm run preview

# 發(fā)布到 npm
npm publish --access public