officialblock 1.6.9 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -0
- package/dist/official-block.cjs.js +6 -6
- package/dist/official-block.es.js +5534 -5339
- package/dist/official-block.umd.js +6 -6
- package/dist/style.css +1 -1
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -133,6 +133,39 @@ console.log('是否为桌面:', device?.isDesktop)
|
|
|
133
133
|
- `$device.isMobileOrTablet`: 是否为移动设备或平板 (宽度 < 1024px)
|
|
134
134
|
- `$device.isDesktop`: 是否为桌面设备 (宽度 ≥ 1024px)
|
|
135
135
|
|
|
136
|
+
### SSR 支持（Nuxt 3）
|
|
137
|
+
|
|
138
|
+
OfficialBlock 完全支持服务端渲染（SSR）！
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
// plugins/officialblock.client.ts
|
|
142
|
+
import OfficialBlock from 'officialblock'
|
|
143
|
+
import 'officialblock/style.css'
|
|
144
|
+
|
|
145
|
+
export default defineNuxtPlugin((nuxtApp) => {
|
|
146
|
+
nuxtApp.vueApp.use(OfficialBlock)
|
|
147
|
+
})
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
对于包含浏览器专属功能的组件（如富文本编辑器、轮播图），使用 `<ClientOnly>` 包裹：
|
|
151
|
+
|
|
152
|
+
```vue
|
|
153
|
+
<template>
|
|
154
|
+
<div>
|
|
155
|
+
<!-- 普通组件可以直接使用 -->
|
|
156
|
+
<BannerImage :modelValue="bannerData" />
|
|
157
|
+
|
|
158
|
+
<!-- 包含浏览器专属功能的组件 -->
|
|
159
|
+
<ClientOnly>
|
|
160
|
+
<RichTextEditor v-model="content" />
|
|
161
|
+
<HeroSlide :modelValue="slideData" />
|
|
162
|
+
</ClientOnly>
|
|
163
|
+
</div>
|
|
164
|
+
</template>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
📚 详细的 SSR 使用指南请查看 [SSR 支持文档](./docs/SSR_SUPPORT.md)
|
|
168
|
+
|
|
136
169
|
### TypeScript Support
|
|
137
170
|
|
|
138
171
|
This package includes TypeScript definitions.
|