officialblock 1.1.4 → 1.1.6

package/README.md

@@ -96,6 +96,43 @@ app.use(ArticleListPlugin)  // 只注册 ArticleList 组件
 app.use(HeroSlidePlugin)    // 只注册 HeroSlide 组件
 ```
 
+### 全局属性
+
+当你使用 `app.use(OfficialBlock)` 安装插件时，会自动注册以下全局属性：
+
+#### $device - 设备检测
+
+在组件中可以直接使用 `$device` 来检测当前设备类型：
+
+```vue
+<template>
+  <div>
+    <div v-if="$device.isMobile">移动端内容</div>
+    <div v-else-if="$device.isTablet">平板内容</div>
+    <div v-else>桌面端内容</div>
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue'
+
+// 在 setup 中使用
+const instance = getCurrentInstance()
+const device = instance?.proxy?.$device
+
+console.log('是否为移动设备:', device?.isMobile)
+console.log('是否为平板:', device?.isTablet)
+console.log('是否为移动设备或平板:', device?.isMobileOrTablet)
+console.log('是否为桌面:', device?.isDesktop)
+</script>
+```
+
+**属性说明：**
+- `$device.isMobile`: 是否为移动设备 (宽度 < 768px)
+- `$device.isTablet`: 是否为平板设备 (768px ≤ 宽度 < 1024px)
+- `$device.isMobileOrTablet`: 是否为移动设备或平板 (宽度 < 1024px)
+- `$device.isDesktop`: 是否为桌面设备 (宽度 ≥ 1024px)
+
 ### TypeScript Support
 
 This package includes TypeScript definitions.
@@ -122,6 +159,9 @@ const heroProps: HeroSlideProps = {
   showIndicators: true,
   autoPlay: true
 }
+
+// $device 全局属性已自动包含类型定义
+// 在 TypeScript 中可以直接使用，无需额外导入
 ```
 
 ## Components