Vue3手机外观组件库超详细代码示例

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')

// 组件内使用
import { PhoneUI } from '@scqilin/phone-ui-vue'

<template>
  <PhoneUI 
    phoneType="iphone16pro"
    frameColor="#111"
    screenColor="#fff"
    :showButtons="true"
  >
    <!-- 在这里放置你的应用内容 -->
    <div class="my-app">
      <header>我的应用头部</header>
      <main>
        <h1>欢迎使用</h1>
        <p>这里是应用内容</p>
        <MyComponent />
      </main>
      <footer>底部导航</footer>
    </div>
  </PhoneUI>
</template>

<template>
  <PhoneUI 
    phoneType="iphone16"
    :width="400"
    :borderRadius="30"
    frameColor="#333"
    notchType="0"
  >
    <!-- 使用 iPhone 16 预设，但覆盖部分配置 -->
    <MyCustomContent />
  </PhoneUI>
</template>

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

<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>

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

<style>
/* 自定义屏幕内容样式 */
.phone-content {
  /* 您的自定义样式 */
}
</style>

# 克隆项目
git clone https://github.com/scqilin/phone-ui-vue.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库文件
npm run build:lib

# 预览
npm run preview

# 发布到 npm
npm publish --access public