@zfqh/uniapp 0.1.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.
Files changed (310) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/LICENSE +21 -0
  3. package/README.md +39 -0
  4. package/docs/api/apis/core.md +189 -0
  5. package/docs/api/apis/index.md +82 -0
  6. package/docs/api/apis/request.md +369 -0
  7. package/docs/api/configs/api.md +32 -0
  8. package/docs/api/configs/app.md +43 -0
  9. package/docs/api/configs/brand.md +43 -0
  10. package/docs/api/configs/cdn.md +35 -0
  11. package/docs/api/configs/color.md +144 -0
  12. package/docs/api/configs/env.md +120 -0
  13. package/docs/api/configs/index.md +394 -0
  14. package/docs/api/configs/link.md +33 -0
  15. package/docs/api/configs/log.md +27 -0
  16. package/docs/api/configs/mp.md +34 -0
  17. package/docs/api/configs/navigate.md +27 -0
  18. package/docs/api/configs/page.md +32 -0
  19. package/docs/api/configs/path.md +27 -0
  20. package/docs/api/configs/storage.md +24 -0
  21. package/docs/api/configs/tabbar.md +29 -0
  22. package/docs/api/configs/toast.md +35 -0
  23. package/docs/api/configs/update.md +25 -0
  24. package/docs/api/configs/upload.md +45 -0
  25. package/docs/api/configs/ver.md +32 -0
  26. package/docs/api/configs/web.md +28 -0
  27. package/docs/api/hooks/index.md +182 -0
  28. package/docs/api/hooks/useI18n.md +27 -0
  29. package/docs/api/hooks/useOverlay.md +37 -0
  30. package/docs/api/hooks/usePopup.md +35 -0
  31. package/docs/api/hooks/useVersion.md +23 -0
  32. package/docs/api/index.md +269 -0
  33. package/docs/api/mixins/app.md +29 -0
  34. package/docs/api/mixins/badge.md +23 -0
  35. package/docs/api/mixins/debounce.md +32 -0
  36. package/docs/api/mixins/deep.md +29 -0
  37. package/docs/api/mixins/index.md +23 -0
  38. package/docs/api/mixins/login.md +22 -0
  39. package/docs/api/mixins/model.md +26 -0
  40. package/docs/api/mixins/redirect.md +26 -0
  41. package/docs/api/mixins/share.md +29 -0
  42. package/docs/api/mixins/show.md +27 -0
  43. package/docs/api/mixins/webview.md +27 -0
  44. package/docs/api/modules/app.md +30 -0
  45. package/docs/api/modules/dict.md +28 -0
  46. package/docs/api/modules/im.md +22 -0
  47. package/docs/api/modules/index.md +44 -0
  48. package/docs/api/modules/launch.md +26 -0
  49. package/docs/api/modules/location.md +25 -0
  50. package/docs/api/modules/login.md +35 -0
  51. package/docs/api/modules/network.md +26 -0
  52. package/docs/api/modules/system.md +29 -0
  53. package/docs/api/utils/audio.md +84 -0
  54. package/docs/api/utils/consts.md +201 -0
  55. package/docs/api/utils/cos.md +269 -0
  56. package/docs/api/utils/debounce.md +89 -0
  57. package/docs/api/utils/file.md +78 -0
  58. package/docs/api/utils/index.md +547 -0
  59. package/docs/api/utils/locale.md +32 -0
  60. package/docs/api/utils/message.md +81 -0
  61. package/docs/api/utils/navigate.md +267 -0
  62. package/docs/api/utils/pages.md +205 -0
  63. package/docs/api/utils/permission.md +28 -0
  64. package/docs/api/utils/permit.md +62 -0
  65. package/docs/api/utils/query.md +89 -0
  66. package/docs/api/utils/request.md +34 -0
  67. package/docs/api/utils/storage.md +145 -0
  68. package/docs/api/utils/subscribe.md +77 -0
  69. package/docs/api/utils/throttle.md +101 -0
  70. package/docs/api/utils/toast.md +164 -0
  71. package/docs/api/utils/uni.md +28 -0
  72. package/docs/api/utils/update.md +165 -0
  73. package/docs/components/g-back-button.md +76 -0
  74. package/docs/components/g-checkbox-list.md +101 -0
  75. package/docs/components/g-container.md +93 -0
  76. package/docs/components/g-data-list.md +106 -0
  77. package/docs/components/g-dot-text.md +79 -0
  78. package/docs/components/g-env.md +75 -0
  79. package/docs/components/g-float.md +83 -0
  80. package/docs/components/g-grid-image.md +91 -0
  81. package/docs/components/g-grid-swiper.md +99 -0
  82. package/docs/components/g-icon.md +106 -0
  83. package/docs/components/g-mask.md +82 -0
  84. package/docs/components/g-money.md +90 -0
  85. package/docs/components/g-more.md +78 -0
  86. package/docs/components/g-page-container.md +170 -0
  87. package/docs/components/g-permission-popup.md +117 -0
  88. package/docs/components/g-polyline-chat.md +102 -0
  89. package/docs/components/g-polyline-view.md +67 -0
  90. package/docs/components/g-popup.md +144 -0
  91. package/docs/components/g-refresh-view.md +118 -0
  92. package/docs/components/g-render-image.md +83 -0
  93. package/docs/components/g-search.md +120 -0
  94. package/docs/components/g-share-photo.md +77 -0
  95. package/docs/components/g-share-view.md +83 -0
  96. package/docs/components/g-share-weixin.md +81 -0
  97. package/docs/components/g-skeleton-view.md +71 -0
  98. package/docs/components/g-skeleton.md +64 -0
  99. package/docs/components/g-tag-editor.md +134 -0
  100. package/docs/components/g-timer.md +72 -0
  101. package/docs/components/g-trtc-room.md +116 -0
  102. package/docs/components/g-trtc-tui.md +84 -0
  103. package/docs/components/g-trtc.md +124 -0
  104. package/docs/components/g-upload.md +117 -0
  105. package/docs/components/g-waterfall.md +84 -0
  106. package/docs/components/index.md +109 -0
  107. package/docs/components/styles/base-styles.md +367 -0
  108. package/docs/components/styles/global-vars.md +150 -0
  109. package/docs/components/usage.md +112 -0
  110. package/docs/faq/index.md +78 -0
  111. package/docs/guide/getting-started.md +195 -0
  112. package/docs/guide/project-frame.md +297 -0
  113. package/docs/index.md +80 -0
  114. package/lib/apis/core.d.ts +12 -0
  115. package/lib/apis/core.js +13 -0
  116. package/lib/apis/index.d.ts +2 -0
  117. package/lib/apis/index.js +2 -0
  118. package/lib/apis/request.d.ts +4 -0
  119. package/lib/apis/request.js +27 -0
  120. package/lib/components/g-back-button/g-back-button.vue +141 -0
  121. package/lib/components/g-checkbox-list/g-checkbox-list.vue +156 -0
  122. package/lib/components/g-container/g-container.vue +159 -0
  123. package/lib/components/g-data-list/g-data-list.vue +192 -0
  124. package/lib/components/g-dot-text/g-dot-text.vue +114 -0
  125. package/lib/components/g-env/g-env.vue +123 -0
  126. package/lib/components/g-float/g-float.vue +131 -0
  127. package/lib/components/g-grid-image/g-grid-image.vue +84 -0
  128. package/lib/components/g-grid-swiper/g-grid-swiper.vue +224 -0
  129. package/lib/components/g-icon/g-icon.vue +72 -0
  130. package/lib/components/g-mask/g-mask.vue +126 -0
  131. package/lib/components/g-money/g-money.vue +174 -0
  132. package/lib/components/g-more/g-more.vue +68 -0
  133. package/lib/components/g-page-container/g-page-container.vue +470 -0
  134. package/lib/components/g-permission-popup/g-permission-popup.vue +80 -0
  135. package/lib/components/g-polyline-chat/g-polyline-chat.vue +255 -0
  136. package/lib/components/g-polyline-view/g-polyline-view.vue +104 -0
  137. package/lib/components/g-popup/g-popup.vue +449 -0
  138. package/lib/components/g-refresh-view/g-refresh-view.vue +213 -0
  139. package/lib/components/g-render-image/g-render-image.vue +222 -0
  140. package/lib/components/g-search/g-search.vue +274 -0
  141. package/lib/components/g-share-photo/g-share-photo.vue +75 -0
  142. package/lib/components/g-share-view/g-share-view.vue +157 -0
  143. package/lib/components/g-share-weixin/g-share-weixin.vue +106 -0
  144. package/lib/components/g-skeleton/g-skeleton.vue +55 -0
  145. package/lib/components/g-skeleton-view/g-skeleton-view.vue +78 -0
  146. package/lib/components/g-tag-editor/g-tag-editor.vue +482 -0
  147. package/lib/components/g-timer/g-timer.vue +61 -0
  148. package/lib/components/g-trtc/g-trtc.vue +347 -0
  149. package/lib/components/g-trtc-room/g-trtc-room.vue +524 -0
  150. package/lib/components/g-trtc-room/iconfont.scss +59 -0
  151. package/lib/components/g-trtc-tui/g-trtc-tui.vue +245 -0
  152. package/lib/components/g-upload/g-upload.vue +294 -0
  153. package/lib/components/g-waterfall/g-waterfall.vue +101 -0
  154. package/lib/configs/api.d.ts +7 -0
  155. package/lib/configs/api.js +6 -0
  156. package/lib/configs/app.d.ts +26 -0
  157. package/lib/configs/app.js +50 -0
  158. package/lib/configs/brand.d.ts +22 -0
  159. package/lib/configs/brand.js +26 -0
  160. package/lib/configs/cdn.d.ts +13 -0
  161. package/lib/configs/cdn.js +12 -0
  162. package/lib/configs/color.d.ts +62 -0
  163. package/lib/configs/color.js +66 -0
  164. package/lib/configs/env.d.ts +37 -0
  165. package/lib/configs/env.js +71 -0
  166. package/lib/configs/index.d.ts +170 -0
  167. package/lib/configs/index.js +82 -0
  168. package/lib/configs/link.d.ts +11 -0
  169. package/lib/configs/link.js +3 -0
  170. package/lib/configs/log.d.ts +9 -0
  171. package/lib/configs/log.js +8 -0
  172. package/lib/configs/mp.d.ts +15 -0
  173. package/lib/configs/mp.js +9 -0
  174. package/lib/configs/navigate.d.ts +17 -0
  175. package/lib/configs/navigate.js +5 -0
  176. package/lib/configs/page.d.ts +18 -0
  177. package/lib/configs/page.js +14 -0
  178. package/lib/configs/path.d.ts +11 -0
  179. package/lib/configs/path.js +10 -0
  180. package/lib/configs/storage.d.ts +7 -0
  181. package/lib/configs/storage.js +6 -0
  182. package/lib/configs/tabbar.d.ts +7 -0
  183. package/lib/configs/tabbar.js +6 -0
  184. package/lib/configs/toast.d.ts +18 -0
  185. package/lib/configs/toast.js +29 -0
  186. package/lib/configs/update.d.ts +45 -0
  187. package/lib/configs/update.js +6 -0
  188. package/lib/configs/upload.d.ts +30 -0
  189. package/lib/configs/upload.js +7 -0
  190. package/lib/configs/ver.d.ts +8 -0
  191. package/lib/configs/ver.js +28 -0
  192. package/lib/configs/web.d.ts +5 -0
  193. package/lib/configs/web.js +2 -0
  194. package/lib/hooks/index.d.ts +4 -0
  195. package/lib/hooks/index.js +4 -0
  196. package/lib/hooks/useI18n.d.ts +2 -0
  197. package/lib/hooks/useI18n.js +19 -0
  198. package/lib/hooks/useOverlay.d.ts +1 -0
  199. package/lib/hooks/useOverlay.js +17 -0
  200. package/lib/hooks/usePopup.d.ts +1 -0
  201. package/lib/hooks/usePopup.js +14 -0
  202. package/lib/hooks/useVersion.d.ts +6 -0
  203. package/lib/hooks/useVersion.js +21 -0
  204. package/lib/index.d.ts +26 -0
  205. package/lib/index.js +33 -0
  206. package/lib/mixins/app.d.ts +14 -0
  207. package/lib/mixins/app.js +105 -0
  208. package/lib/mixins/badge.d.ts +24 -0
  209. package/lib/mixins/badge.js +44 -0
  210. package/lib/mixins/debounce.d.ts +6 -0
  211. package/lib/mixins/debounce.js +11 -0
  212. package/lib/mixins/deep.d.ts +6 -0
  213. package/lib/mixins/deep.js +8 -0
  214. package/lib/mixins/index.d.ts +8 -0
  215. package/lib/mixins/index.js +8 -0
  216. package/lib/mixins/login.d.ts +4 -0
  217. package/lib/mixins/login.js +25 -0
  218. package/lib/mixins/model.d.ts +22 -0
  219. package/lib/mixins/model.js +29 -0
  220. package/lib/mixins/redirect.d.ts +8 -0
  221. package/lib/mixins/redirect.js +94 -0
  222. package/lib/mixins/share.d.ts +15 -0
  223. package/lib/mixins/share.js +55 -0
  224. package/lib/mixins/show.d.ts +9 -0
  225. package/lib/mixins/show.js +16 -0
  226. package/lib/mixins/webview.d.ts +26 -0
  227. package/lib/mixins/webview.js +225 -0
  228. package/lib/modules/app.d.ts +5 -0
  229. package/lib/modules/app.js +19 -0
  230. package/lib/modules/dict.d.ts +8 -0
  231. package/lib/modules/dict.js +43 -0
  232. package/lib/modules/im.d.ts +6 -0
  233. package/lib/modules/im.js +105 -0
  234. package/lib/modules/index.d.ts +8 -0
  235. package/lib/modules/index.js +8 -0
  236. package/lib/modules/launch.d.ts +5 -0
  237. package/lib/modules/launch.js +32 -0
  238. package/lib/modules/location.d.ts +5 -0
  239. package/lib/modules/location.js +57 -0
  240. package/lib/modules/login.d.ts +5 -0
  241. package/lib/modules/login.js +72 -0
  242. package/lib/modules/network.d.ts +5 -0
  243. package/lib/modules/network.js +39 -0
  244. package/lib/modules/system.d.ts +5 -0
  245. package/lib/modules/system.js +65 -0
  246. package/lib/styles/animate-vue.scss +3 -0
  247. package/lib/styles/animate.scss +27 -0
  248. package/lib/styles/bg-vue.scss +21 -0
  249. package/lib/styles/bg.scss +93 -0
  250. package/lib/styles/border.scss +218 -0
  251. package/lib/styles/flex-nvue.scss +64 -0
  252. package/lib/styles/flex-vue.scss +75 -0
  253. package/lib/styles/font.scss +59 -0
  254. package/lib/styles/index.scss +25 -0
  255. package/lib/styles/layout-nvue.scss +24 -0
  256. package/lib/styles/layout-vue.scss +30 -0
  257. package/lib/styles/layout.scss +76 -0
  258. package/lib/styles/opacity.scss +10 -0
  259. package/lib/styles/reset-vue.scss +46 -0
  260. package/lib/styles/shadow.scss +12 -0
  261. package/lib/styles/sizing-vue.scss +21 -0
  262. package/lib/styles/sizing.scss +21 -0
  263. package/lib/styles/spacing.scss +234 -0
  264. package/lib/styles/text-nvue.scss +21 -0
  265. package/lib/styles/text-vue.scss +70 -0
  266. package/lib/styles/text.scss +122 -0
  267. package/lib/styles/var.module.scss +29 -0
  268. package/lib/utils/audio.d.ts +14 -0
  269. package/lib/utils/audio.js +43 -0
  270. package/lib/utils/consts.d.ts +30 -0
  271. package/lib/utils/consts.js +52 -0
  272. package/lib/utils/cos.d.ts +15 -0
  273. package/lib/utils/cos.js +140 -0
  274. package/lib/utils/debounce.d.ts +2 -0
  275. package/lib/utils/debounce.js +30 -0
  276. package/lib/utils/file.d.ts +28 -0
  277. package/lib/utils/file.js +292 -0
  278. package/lib/utils/index.d.ts +166 -0
  279. package/lib/utils/index.js +485 -0
  280. package/lib/utils/locale.d.ts +6 -0
  281. package/lib/utils/locale.js +19 -0
  282. package/lib/utils/message.d.ts +9 -0
  283. package/lib/utils/message.js +63 -0
  284. package/lib/utils/navigate.d.ts +27 -0
  285. package/lib/utils/navigate.js +183 -0
  286. package/lib/utils/pages.d.ts +21 -0
  287. package/lib/utils/pages.js +79 -0
  288. package/lib/utils/permission.d.ts +16 -0
  289. package/lib/utils/permission.js +291 -0
  290. package/lib/utils/permit.d.ts +30 -0
  291. package/lib/utils/permit.js +181 -0
  292. package/lib/utils/query.d.ts +13 -0
  293. package/lib/utils/query.js +14 -0
  294. package/lib/utils/request.d.ts +8 -0
  295. package/lib/utils/request.js +126 -0
  296. package/lib/utils/storage.d.ts +53 -0
  297. package/lib/utils/storage.js +145 -0
  298. package/lib/utils/subscribe.d.ts +7 -0
  299. package/lib/utils/subscribe.js +94 -0
  300. package/lib/utils/throttle.d.ts +2 -0
  301. package/lib/utils/throttle.js +32 -0
  302. package/lib/utils/toast.d.ts +17 -0
  303. package/lib/utils/toast.js +66 -0
  304. package/lib/utils/uni.d.ts +1 -0
  305. package/lib/utils/uni.js +147 -0
  306. package/lib/utils/update.d.ts +9 -0
  307. package/lib/utils/update.js +376 -0
  308. package/package.json +49 -0
  309. package/types/index.d.ts +25 -0
  310. package/types/virtual.d.ts +1 -0
@@ -0,0 +1,118 @@
1
+ # g-refresh-view 下拉刷新容器
2
+
3
+ ::: tip 组件名
4
+ `g-refresh-view`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-refresh-view/g-refresh-view.vue`
7
+ :::
8
+
9
+ 滚动刷新容器,封装 scroll-view refresher,并统一下拉状态事件。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <g-refresh-view
29
+ :triggered="refreshing"
30
+ height="100vh"
31
+ enabled
32
+ @refresh="reload"
33
+ @scrollbottom="loadMore"
34
+ >
35
+ <goods-card v-for="item in list" :key="item.id" :data="item" />
36
+ </g-refresh-view>
37
+ </template>
38
+
39
+ <script setup>
40
+ import { ref } from 'vue';
41
+
42
+ const refreshing = ref(false);
43
+ const list = ref([]);
44
+
45
+ async function reload() {
46
+ refreshing.value = true;
47
+ list.value = await goodsApi.page({ page: 1 });
48
+ refreshing.value = false;
49
+ }
50
+
51
+ function loadMore() {
52
+ goodsApi.nextPage();
53
+ }
54
+ </script>
55
+ ```
56
+
57
+ ## API
58
+
59
+ ### 下拉刷新容器 Props
60
+
61
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
62
+ | --- | --- | --- | --- | --- |
63
+ | `enabled` | `Boolean` | `true` | 否 | 是否启用 scroll-view refresher。 |
64
+ | `triggered` | `Boolean` | `false` | 否 | 下拉刷新受控状态。 |
65
+ | `completeText` | `String` | `'刷新成功'` | 否 | complete 文案。 |
66
+ | `loadingStyle` | `Object` | `() => ({})` | 否 | 自定义 loading 区域 style 对象。 |
67
+ | `mode` | `String` | `'none'` | 否 | 组件模式,不同组件含义不同;例如 popup 方位、tag-editor 编辑模式、refresh-view 刷新模式。 |
68
+ | `height` | `String` | `'100%'` | 否 | 高度。 |
69
+ | `scrollTop` | `Number` | `0` | 否 | 组件公开属性 scrollTop,用于控制该组件对应的渲染、交互或业务参数。 |
70
+ | `threshold` | `Number` | `40` | 否 | 组件公开属性 threshold,用于控制该组件对应的渲染、交互或业务参数。 |
71
+ | `background` | `String` | `'transparent'` | 否 | 组件公开属性 background,用于控制该组件对应的渲染、交互或业务参数。 |
72
+ | `spinnerColor` | `String` | `''` | 否 | spinner 颜色。 |
73
+ | `animation` | `Boolean` | `false` | 否 | 组件公开属性 animation,用于控制该组件对应的渲染、交互或业务参数。 |
74
+
75
+ ### 下拉刷新容器 Events
76
+
77
+ | 事件 | 说明 |
78
+ | --- | --- |
79
+ | `pulling` | 下拉刷新拖拽过程中触发。 |
80
+ | `refresh` | 下拉刷新被触发时触发。 |
81
+ | `restore` | 下拉刷新复位时触发。 |
82
+ | `abort` | 下拉刷新被中止时触发。 |
83
+ | `scroll` | 滚动时触发,透传 scroll-view 事件对象。 |
84
+ | `scrolltop` | 滚动到顶部时触发。 |
85
+ | `scrollbottom` | 滚动到底部时触发。 |
86
+
87
+ ### 下拉刷新容器 Slots
88
+
89
+ | 插槽 | 说明 |
90
+ | --- | --- |
91
+ | `refresher` | 自定义下拉刷新区域。 |
92
+ | `completeText` | 刷新完成文案区域。 |
93
+ | `spinner` | 刷新中 loading 区域。 |
94
+ | `default` | 默认内容区域。 |
95
+
96
+ ### 下拉刷新容器 Methods
97
+
98
+ | 方法 | 说明 |
99
+ | --- | --- |
100
+ | `refresherpulling(e)` | 组件内部公开方法 refresherpulling(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
101
+ | `refresherrefresh(e)` | 组件内部公开方法 refresherrefresh(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
102
+ | `refresherrestore(e)` | 组件内部公开方法 refresherrestore(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
103
+ | `refresherabort(e)` | 组件内部公开方法 refresherabort(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
104
+ | `scroll(e)` | 组件内部公开方法 scroll(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
105
+ | `scrolltoupper()` | 组件内部公开方法 scrolltoupper();通过 ref 调用前需要确认组件平台条件和当前状态。 |
106
+ | `scrolltolower()` | 组件内部公开方法 scrolltolower();通过 ref 调用前需要确认组件平台条件和当前状态。 |
107
+
108
+ ### 下拉刷新容器 Internal State
109
+
110
+ | 类型 | 名称 | 说明 |
111
+ | --- | --- | --- |
112
+ | computed | `spinnerStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
113
+ | computed | `_loadingStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
114
+ | computed | `refresherBackground` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
115
+ | data | `refreshing` | 内部响应式状态,通常不建议由外部直接依赖。 |
116
+ | data | `completed` | 内部响应式状态,通常不建议由外部直接依赖。 |
117
+ | data | `pulling` | 内部响应式状态,通常不建议由外部直接依赖。 |
118
+ | data | `opacity` | 内部响应式状态,通常不建议由外部直接依赖。 |
@@ -0,0 +1,83 @@
1
+ # g-render-image 图片渲染
2
+
3
+ ::: tip 组件名
4
+ `g-render-image`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-render-image/g-render-image.vue`
7
+ :::
8
+
9
+ 把页面 DOM/插槽内容渲染成图片并保存或返回路径的分享海报辅助组件。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <g-render-image ref="renderRef" dom-id="goodsPoster" name="goods-poster" :content-style="{ borderRadius: '12rpx' }">
29
+ <view id="goodsPoster" class="poster-card">
30
+ <image :src="goods.cover" mode="aspectFill" />
31
+ <view class="title">{{ goods.name }}</view>
32
+ </view>
33
+ </g-render-image>
34
+
35
+ <uv-button text="保存海报" @click="renderRef?.download()" />
36
+ </template>
37
+
38
+ <script setup>
39
+ import { ref } from 'vue';
40
+
41
+ const renderRef = ref(null);
42
+ const goods = { name: '黄芪养生茶', cover: 'https://static.example.com/goods.png' };
43
+ </script>
44
+ ```
45
+
46
+ ## API
47
+
48
+ ### 图片渲染 Props
49
+
50
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
51
+ | --- | --- | --- | --- | --- |
52
+ | `domId` | `String` | `''` | 否 | 组件公开属性 domId,用于控制该组件对应的渲染、交互或业务参数。 |
53
+ | `name` | `String` | `''` | 否 | 组件公开属性 name,用于控制该组件对应的渲染、交互或业务参数。 |
54
+ | `successTips` | `String` | `'已保存到相册'` | 否 | 组件公开属性 successTips,用于控制该组件对应的渲染、交互或业务参数。 |
55
+ | `saveTips` | `String` | `'长按图片保存到相册'` | 否 | 组件公开属性 saveTips,用于控制该组件对应的渲染、交互或业务参数。 |
56
+ | `contentStyle` | `Object` | `() => ({})` | 否 | 自定义 content 区域 style 对象。 |
57
+ | `imageStyle` | `Object` | `() => ({})` | 否 | 自定义 image 区域 style 对象。 |
58
+
59
+ ### 图片渲染 Events
60
+
61
+ 无显式组件事件。
62
+
63
+ ### 图片渲染 Slots
64
+
65
+ | 插槽 | 说明 |
66
+ | --- | --- |
67
+ | `default` | 默认内容区域。 |
68
+
69
+ ### 图片渲染 Methods
70
+
71
+ | 方法 | 说明 |
72
+ | --- | --- |
73
+ | `setResolve(e)` | 组件内部公开方法 setResolve(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
74
+ | `setReject(e)` | 组件内部公开方法 setReject(e);通过 ref 调用前需要确认组件平台条件和当前状态。 |
75
+ | `getBase64()` | 组件内部公开方法 getBase64();通过 ref 调用前需要确认组件平台条件和当前状态。 |
76
+ | `download()` | 组件内部公开方法 download();通过 ref 调用前需要确认组件平台条件和当前状态。 |
77
+
78
+ ### 图片渲染 Internal State
79
+
80
+ | 类型 | 名称 | 说明 |
81
+ | --- | --- | --- |
82
+
83
+ | data | `path` | 内部响应式状态,通常不建议由外部直接依赖。 | | data | `count` | 内部响应式状态,通常不建议由外部直接依赖。 | | data | `show` | 内部响应式状态,通常不建议由外部直接依赖。 | | data | `resolve` | 内部响应式状态,通常不建议由外部直接依赖。 | | data | `reject` | 内部响应式状态,通常不建议由外部直接依赖。 |
@@ -0,0 +1,120 @@
1
+ # g-search 搜索栏
2
+
3
+ ::: tip 组件名
4
+ `g-search`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-search/g-search.vue`
7
+ :::
8
+
9
+ 搜索框组件,支持输入、清空、搜索按钮、边框/圆角/占位样式和插槽扩展。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <g-search
29
+ v-model="keyword"
30
+ height="70rpx"
31
+ font-size="26rpx"
32
+ shape="circle"
33
+ placeholder="请输入您要搜索的商品"
34
+ show-button
35
+ clearable
36
+ @search="search"
37
+ @clear="reset"
38
+ />
39
+ </template>
40
+
41
+ <script setup>
42
+ import { ref } from 'vue';
43
+
44
+ const keyword = ref('');
45
+
46
+ function search(value) {
47
+ goodsApi.page({ keyword: value });
48
+ }
49
+
50
+ function reset() {
51
+ keyword.value = '';
52
+ goodsApi.page({ keyword: '' });
53
+ }
54
+ </script>
55
+ ```
56
+
57
+ ## API
58
+
59
+ ### 搜索栏 Props
60
+
61
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
62
+ | --- | --- | --- | --- | --- |
63
+ | `placeholder` | `String` | `-` | 否 | 输入框占位文本。 |
64
+ | `height` | `[String, Number]` | `35` | 否 | 高度。 |
65
+ | `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
66
+ | `inputStyle` | `Object` | `() => ({})` | 否 | 自定义 input 区域 style 对象。 |
67
+ | `buttonStyle` | `Object` | `() => ({})` | 否 | 自定义 button 区域 style 对象。 |
68
+ | `showButton` | `Boolean` | `false` | 否 | 是否显示 Button 区域或能力。 |
69
+ | `fontSize` | `[String, Number]` | `14` | 否 | 字体大小。 |
70
+ | `bgColor` | `String` | `'#fff'` | 否 | 背景颜色。 |
71
+ | `lineColor` | `String` | `'#ECEDF0'` | 否 | line 颜色。 |
72
+ | `borderColor` | `String` | `() => color.primary` | 否 | border 颜色。 |
73
+ | `placeholderStyle` | `Object` | `() => ({})` | 否 | 自定义 placeholder 区域 style 对象。 |
74
+ | `placeholderClass` | `String` | `''` | 否 | 自定义 placeholder 区域 class。 |
75
+ | `border` | `[Boolean, Number]` | `true` | 否 | 是否显示边框。 |
76
+ | `maxlength` | `[String, Number]` | `100` | 否 | 最大输入长度。 |
77
+ | `borderRadius` | `[String, Number]` | `4` | 否 | 圆角。 |
78
+ | `clearSize` | `[String, Number]` | `15` | 否 | clear 尺寸。 |
79
+ | `shape` | `String` | `'square'` | 否 | 组件公开属性 shape,用于控制该组件对应的渲染、交互或业务参数。 |
80
+ | `keywords` | `[Boolean, Array]` | `() => false` | 否 | 搜索框受控关键词。 |
81
+ | `params` | `Object` | `() => ({})` | 否 | 拼接到跳转地址或业务请求中的 query 参数。 |
82
+ | `autoFocus` | `Boolean` | `-` | 否 | 是否自动聚焦。 |
83
+ | `clearable` | `Boolean` | `-` | 否 | 是否显示清空按钮。 |
84
+
85
+ ### 搜索栏 Events
86
+
87
+ | 事件 | 说明 |
88
+ | --- | --- |
89
+ | `search` | 用户提交搜索时触发。 |
90
+ | `input` | 输入内容变化时触发。 |
91
+ | `clear` | 用户清空输入时触发。 |
92
+
93
+ ### 搜索栏 Slots
94
+
95
+ | 插槽 | 说明 |
96
+ | --- | --- |
97
+ | `icon` | 搜索框左侧图标区域。 |
98
+ | `button` | 搜索框右侧按钮区域。 |
99
+
100
+ ### 搜索栏 Methods
101
+
102
+ | 方法 | 说明 |
103
+ | --- | --- |
104
+ | `setKeyword()` | 组件内部公开方法 setKeyword();通过 ref 调用前需要确认组件平台条件和当前状态。 |
105
+ | `change({ detail })` | 处理变更事件并同步内部状态。 |
106
+ | `click()` | 处理点击逻辑;可能触发跳转、自定义函数或对外事件。 |
107
+ | `search()` | 提交搜索关键词。 |
108
+ | `input()` | 同步输入框内容并抛出 input。 |
109
+ | `clear()` | 清空内部数据或输入值。 |
110
+
111
+ ### 搜索栏 Internal State
112
+
113
+ | 类型 | 名称 | 说明 |
114
+ | --- | --- | --- |
115
+ | computed | `style` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
116
+ | computed | `closeStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
117
+ | computed | `_placeholderStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
118
+ | computed | `inputPlaceholderStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
119
+ | computed | `_inputStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
120
+ | data | `current` | 内部响应式状态,通常不建议由外部直接依赖。 |
@@ -0,0 +1,77 @@
1
+ # g-share-photo 分享图片
2
+
3
+ ::: tip 组件名
4
+ `g-share-photo`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-share-photo/g-share-photo.vue`
7
+ :::
8
+
9
+ 保存图片到相册的分享入口,可走默认保存流程或 custom 自定义逻辑。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <g-share-photo color="#fff" text="保存海报" :data="poster" @confirm="downloadPoster" />
29
+ </template>
30
+
31
+ <script setup>
32
+ const poster = { url: 'https://static.example.com/poster.png', name: 'goods-poster' };
33
+
34
+ function downloadPoster(data) {
35
+ uni.saveImageToPhotosAlbum({ filePath: data.url });
36
+ }
37
+ </script>
38
+ ```
39
+
40
+ ## API
41
+
42
+ ### 分享图片 Props
43
+
44
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
45
+ | --- | --- | --- | --- | --- |
46
+ | `size` | `[Number, String]` | `40` | 否 | 组件尺寸。 |
47
+ | `url` | `String` | `'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAe1BMVEVHcEz29vb29vb39/f39/f29vb29vb39/f29vb29vb29vb29vb29vb39/f29vb39/f29vb39/f6+vn49/f29vbw8PDp6ezb3eTQ0dO5xeGusLOZsOqjpKigoKSNj5Vmi+ODhYqAgoh9f4R3eX9zdXxvcXhEcd5rbXQaUdgrKM5JAAAAEnRSTlMABxMjOFVkdY2epaqwxdPc7feYI9LvAAAC+UlEQVR42rWZ23arIBCGVYwxadABBhNzbk7m/Z9wb7pXSrtABrvp34t69a2PkMDMmIWSF6ys6iVvAQRA2/BlXZWsyLOfpWCz+oOFnzFYXs9YMZ2Ws9miNSw3AtrFjOUTcXNuaT4mn7N8Cq4BJAJNNLKoOGBEgFdFjF65BIwMLMuc1msERkc0lCSrAScFahbilSuBEyNWZYDHBU6O4OU4D38UXhK8BETLS0dkxH4QO+PsdVETPIJYF995eQXoRMmxKPf7WOXfgGWDnnRj0eikKb8teClcP90fzyPZr91FL4vwghVu3oex3PZahhbNOHoEt/fh7s8wHDsHiJx9Cs7BD7wf9r4czl4gzF+KrEE/8LrRvnSHuw+IDXMEHaCUyvmTem+BPkXGcRSICp1IbQ29n+IMpgHVKBBmRrFYiFSGYlGYFbcYA1SKNsSWZVk+A0xgaNdc1CIGuN71WpGG5tBhHGmg0rvno5Okodnnso0ASgsMGmJbZhXEA2lDqLIaUhpCnb2JlIbiLeOY0hB51mJKQ2wzSGsIMUCpXkApKUPIBA3U+gXUmjIUEYbr007jB9A8KZT/BzS/uufuw3D9MNQgUEHWRhg+n33/fPSPv//pz7AhgcoQT8+H4ZG73MZ8saUhmvRI7jKP+empf8SH4RGG4i3qcFCyOz1OPSr6tKmjji8D6TpUEadNFXfAGknzRBq2JX0FOAkZckZfUk5k8JIirlEplROp94FrNHzR92tvAhd9sBS5DdfLK9erfb7chlApYtfsAm3u19vwJaFiye6zC/wsga/bzeZoS+QhWM7lc6CAt20n1fo8DKEa29bErKGAZrtldxyGoGHDbNFOAO+HDvXm4hg6grFtxXA79FvDC7cVROPTX4cvMZhXjLGv8SFas277pTV7v7yfbQ4bX2tGNY9Kd6MhmsfJ7a1UoQWnb8DTjwjSDzHSj1nsYCnxaEmk4VniCnBiYFWmHvelHkimH5mmH+qmHzunH4ynH93//ssF+vWHYcW8/vgDsk2pVS+emuAAAAAASUVORK5CYII='` | 否 | 目标地址或图片地址,具体含义取决于组件。 |
48
+ | `text` | `String` | `'保存图片'` | 否 | 组件公开属性 text,用于控制该组件对应的渲染、交互或业务参数。 |
49
+ | `fontSize` | `[Number, String]` | `13` | 否 | 字体大小。 |
50
+ | `color` | `String` | `''` | 否 | 文字或图标主色。 |
51
+ | `space` | `[Number, String]` | `4` | 否 | 组件公开属性 space,用于控制该组件对应的渲染、交互或业务参数。 |
52
+ | `data` | `Object` | `() => ({})` | 否 | 组件渲染或业务计算使用的数据源。 |
53
+ | `custom` | `Function` | `null` | 否 | 自定义处理函数;存在时组件会优先调用它接管默认动作。 |
54
+ | `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
55
+
56
+ ### 分享图片 Events
57
+
58
+ | 事件 | 说明 |
59
+ | --- | --- |
60
+ | `confirm` | 点击确认按钮或执行确认动作时触发。 |
61
+
62
+ ### 分享图片 Slots
63
+
64
+ 无显式插槽。
65
+
66
+ ### 分享图片 Methods
67
+
68
+ | 方法 | 说明 |
69
+ | --- | --- |
70
+ | `click()` | 处理点击逻辑;可能触发跳转、自定义函数或对外事件。 |
71
+
72
+ ### 分享图片 Internal State
73
+
74
+ | 类型 | 名称 | 说明 |
75
+ | --- | --- | --- |
76
+ | computed | `style` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
77
+ | computed | `textStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
@@ -0,0 +1,83 @@
1
+ # g-share-view 分享视图
2
+
3
+ ::: tip 组件名
4
+ `g-share-view`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-share-view/g-share-view.vue`
7
+ :::
8
+
9
+ 分享操作面板,聚合保存图片和微信分享按钮,并展示分享引导。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <view id="shareCover" class="share-cover">{{ title }}</view>
29
+
30
+ <g-share-view dom-id="shareCover" :buttons="shareButtons" :custom-style="{ padding: '24rpx' }" />
31
+ </template>
32
+
33
+ <script setup>
34
+ const title = '中医体质分析报告';
35
+ const shareButtons = [
36
+ { type: 'photo', text: '保存图片' },
37
+ { type: 'weixin', text: '微信好友' },
38
+ ];
39
+ </script>
40
+ ```
41
+
42
+ ## API
43
+
44
+ ### 分享视图 Props
45
+
46
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
47
+ | --- | --- | --- | --- | --- |
48
+ | `domId` | `String` | `''` | 否 | 组件公开属性 domId,用于控制该组件对应的渲染、交互或业务参数。 |
49
+ | `title` | `[String, Boolean]` | `'分享至:'` | 否 | 标题文本;传 false 时可隐藏标题内容。 |
50
+ | `successTips` | `String` | `'已保存到相册'` | 否 | 组件公开属性 successTips,用于控制该组件对应的渲染、交互或业务参数。 |
51
+ | `saveTips` | `String` | `'长按图片保存到相册'` | 否 | 组件公开属性 saveTips,用于控制该组件对应的渲染、交互或业务参数。 |
52
+ | `shareTips` | `String` | `'点击分享至微信'` | 否 | 组件公开属性 shareTips,用于控制该组件对应的渲染、交互或业务参数。 |
53
+ | `titleSize` | `[String, Number]` | `14` | 否 | 标题字号。 |
54
+ | `titleColor` | `String` | `''` | 否 | 标题颜色。 |
55
+ | `gutter` | `[String, Number]` | `20` | 否 | 间距。 |
56
+ | `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
57
+ | `buttons` | `Array` | `() => [ { type: 'photo', }, { type: 'weixin', }, ]` | 否 | 组件公开属性 buttons,用于控制该组件对应的渲染、交互或业务参数。 |
58
+
59
+ ### 分享视图 Events
60
+
61
+ 无显式组件事件。
62
+
63
+ ### 分享视图 Slots
64
+
65
+ 无显式插槽。
66
+
67
+ ### 分享视图 Methods
68
+
69
+ | 方法 | 说明 |
70
+ | --- | --- |
71
+ | `click(data)` | 处理点击逻辑;可能触发跳转、自定义函数或对外事件。 |
72
+
73
+ ### 分享视图 Internal State
74
+
75
+ | 类型 | 名称 | 说明 |
76
+ | --- | --- | --- |
77
+ | computed | `hasPhoto` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
78
+ | computed | `hasWeixin` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
79
+ | computed | `guideStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
80
+ | computed | `titleStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
81
+ | computed | `itemStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
82
+ | data | `arrow` | 内部响应式状态,通常不建议由外部直接依赖。 |
83
+ | data | `show` | 内部响应式状态,通常不建议由外部直接依赖。 |
@@ -0,0 +1,81 @@
1
+ # g-share-weixin 微信分享
2
+
3
+ ::: tip 组件名
4
+ `g-share-weixin`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-share-weixin/g-share-weixin.vue`
7
+ :::
8
+
9
+ 微信分享入口,适配 App/WebView 场景并通过 confirm 事件回传分享数据。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <g-share-weixin text="微信好友" color="#333" :data="shareData" @confirm="shareToWeixin" />
29
+ </template>
30
+
31
+ <script setup>
32
+ const shareData = {
33
+ title: '黄芪养生茶',
34
+ path: '/pages/goods/goodsDetail/goodsDetail?id=1001',
35
+ imageUrl: 'https://static.example.com/share.png',
36
+ };
37
+
38
+ function shareToWeixin(data) {
39
+ uni.share({ provider: 'weixin', scene: 'WXSceneSession', type: 0, ...data });
40
+ }
41
+ </script>
42
+ ```
43
+
44
+ ## API
45
+
46
+ ### 微信分享 Props
47
+
48
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
49
+ | --- | --- | --- | --- | --- |
50
+ | `size` | `[Number, String]` | `40` | 否 | 组件尺寸。 |
51
+ | `url` | `String` | `'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAATlBMVEVHcEz19fX39/f39/f29vb39/f29vb29vb39/f39/f39/f29vb39/f39/f6+Pr29vbk8uTQ7dC66LqZ4Jhv1W5OzU0wxS4YvxYIuwYFugSG7RHKAAAADnRSTlMAECM5WG2NpLbI2+rx+KBF4WsAAAO2SURBVHjaxZnrcoMgEIWNGg0i95u8/4sWUMPUJV5qZnp+WWfy9eyyuyJWu3rUTdv1aMAjGfEwoL5rm/pRnRSktd0rstgiwsaAfXVtYl6n9QHGCgrQHjAPcU+ESWZAJnpeQQYc8AaYAXnWXsYdIU+ZbHrMTgr3zQl7A2GnRYYjk3WH2SXhrt7lvQi7KPLaCbtBhF0WQc1nHvuTUHOXB4l3eTDqm+sBV6YG9dcRdkOk29bjE7Nbws9NAgd2T2RofgXcE3aX2D9OBExXXQy6RkVa5PAkxk4wUZ0nzFjCMS6U0sYYrZXk/JA5Ph87BgNOaevcFOWcs1pydkAc6mwQ2OPKuMkHTT4pUI3ilJ6xWCPIE9pFSlb8y2lBz2SxxSBcaaeMy8zJyN2wcVusQUqljTifPb6Dt5LSo1qsQZOIhefc5BfeNF/7yQq6vywwYsrN8luttPMzzyi13DWc7sUMxwxlKlG8U5yJlSKi7+U2o7tDp0bAoE+/tJxGeAJqRpf7Pt7fW2c4Z2RgbB1aGe5bH3RgcWi2c4HyNW/eaWXWHFqtbVwla4wJwKCPE6Ib4ZKsZZdX2YdLZ5QMUkqKj509dlVPSsCkX3XojBQytXf0qVUZSfqqvCarMk8JaWIxzvrY2agaTgGtFHqmJXyUK/bhUJXKeouLPDNth4W3ChJxNTJQ1wDolFi7+41LeYDEsSIM1uGGN2lhEmGKUa+L7pPzLZAEh0dJ9FYsDWN0TORcli4RQWeTmENo0W8MWj+DWSp77yTj6X/AoMd1lWGv5AxK5RYgZSoBBZ0zAy3iDRAutA8cnf6Ovais9/M0s9M6QjZlgxgk5hpJJqT17zHrfb4oAdHSevAZlVP4Bi6FnS/gMCN9Hg6FPPoMLAo6HLs8vkB5rzLS+DIROsTPPGBBMTprnQuhW6knf9Lh0JQ3SlS6yWrBpVJaawG7MdfobyCq54cUTGHErdsvmjq5HLGgYGfc4gJQyWXa0ShetggbBbf5QQ+goL+PA2ZDfXI7TIXxAJke+nArAmIuSxg3EzPOJX8gYridK4tvHgHQHyOozhvOQ1EutZ2ZsZVdGjRww3nBYtpza2ODjI57Jycp3G8eWIT7eC6E4JzHFFjFKDAILB4hV8WscmDw3psepfDF5/uvZvdfHvOc+frr7fdfwL9/RAAPMf79WATy4MHSd4+W/pTH3cOv13gVNwLeV4/7oB4tIlfS14L6A8TbR6b3D3W/f+x8/2CcpIPxfzu6hx8XsrM/f1yAnz8C69Tnjx/J3knKZLi2SwAAAABJRU5ErkJggg=='` | 否 | 目标地址或图片地址,具体含义取决于组件。 |
52
+ | `text` | `String` | `'微信好友'` | 否 | 组件公开属性 text,用于控制该组件对应的渲染、交互或业务参数。 |
53
+ | `fontSize` | `[Number, String]` | `13` | 否 | 字体大小。 |
54
+ | `color` | `String` | `''` | 否 | 文字或图标主色。 |
55
+ | `data` | `Object` | `() => ({})` | 否 | 组件渲染或业务计算使用的数据源。 |
56
+ | `space` | `[Number, String]` | `4` | 否 | 组件公开属性 space,用于控制该组件对应的渲染、交互或业务参数。 |
57
+ | `custom` | `Function` | `null` | 否 | 自定义处理函数;存在时组件会优先调用它接管默认动作。 |
58
+ | `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
59
+
60
+ ### 微信分享 Events
61
+
62
+ | 事件 | 说明 |
63
+ | --- | --- |
64
+ | `confirm` | 点击确认按钮或执行确认动作时触发。 |
65
+
66
+ ### 微信分享 Slots
67
+
68
+ 无显式插槽。
69
+
70
+ ### 微信分享 Methods
71
+
72
+ | 方法 | 说明 |
73
+ | --- | --- |
74
+ | `click()` | 处理点击逻辑;可能触发跳转、自定义函数或对外事件。 |
75
+
76
+ ### 微信分享 Internal State
77
+
78
+ | 类型 | 名称 | 说明 |
79
+ | --- | --- | --- |
80
+ | computed | `style` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
81
+ | computed | `textStyle` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |
@@ -0,0 +1,71 @@
1
+ # g-skeleton-view 骨架视图
2
+
3
+ ::: tip 组件名
4
+ `g-skeleton-view`
5
+
6
+ 发布路径:`@zfqh/uniapp/lib/components/g-skeleton-view/g-skeleton-view.vue`
7
+ :::
8
+
9
+ 骨架屏块,用于组合出头像、标题、段落等占位结构。
10
+
11
+ ## 平台兼容性
12
+
13
+ | App(vue) | App(nvue) | H5 | 小程序 | Vue 2 | Vue 3 |
14
+ | --- | --- | --- | --- | --- | --- |
15
+ | √ | 依赖源码条件编译 | √ | √ | - | √ |
16
+
17
+ ## 使用前提
18
+
19
+ - 已安装并注册 `@zfqh/uniapp` 插件。
20
+ - 已按 [项目接入](./usage) 配置 easycom,或手动从构建产物导入组件。
21
+ - 尺寸类属性通常支持数字或带单位字符串;数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
22
+ - 样式类属性中,`customStyle`、`xxxStyle` 接收对象,`customClass`、`xxxClass` 接收 class 字符串。
23
+
24
+ ## 基本使用
25
+
26
+ ```vue
27
+ <template>
28
+ <view class="goods-skeleton">
29
+ <g-skeleton-view height="158rpx" width="158rpx" border-radius="20rpx" />
30
+ <view class="g-flex-1 g-m-l-20">
31
+ <g-skeleton-view height="40rpx" width="320rpx" border-radius="8rpx" />
32
+ <g-skeleton-view height="32rpx" width="240rpx" border-radius="8rpx" margin-top="12rpx" />
33
+ </view>
34
+ </view>
35
+ </template>
36
+ ```
37
+
38
+ ## API
39
+
40
+ ### 骨架视图 Props
41
+
42
+ | 属性 | 类型 | 默认值 | 必填 | 说明 |
43
+ | --- | --- | --- | --- | --- |
44
+ | `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
45
+ | `borderRadius` | `[String, Number]` | `0` | 否 | 圆角。 |
46
+ | `bgColor` | `String` | `'#e5e5e5'` | 否 | 背景颜色。 |
47
+ | `width` | `[String, Number]` | `'auto'` | 否 | 宽度。 |
48
+ | `height` | `[String, Number]` | `20` | 否 | 高度。 |
49
+ | `marginTop` | `[String, Number]` | `0` | 否 | 组件公开属性 marginTop,用于控制该组件对应的渲染、交互或业务参数。 |
50
+ | `marginLeft` | `[String, Number]` | `0` | 否 | 组件公开属性 marginLeft,用于控制该组件对应的渲染、交互或业务参数。 |
51
+ | `marginRight` | `[String, Number]` | `0` | 否 | 组件公开属性 marginRight,用于控制该组件对应的渲染、交互或业务参数。 |
52
+
53
+ ### 骨架视图 Events
54
+
55
+ 无显式组件事件。
56
+
57
+ ### 骨架视图 Slots
58
+
59
+ | 插槽 | 说明 |
60
+ | --- | --- |
61
+ | `default` | 默认内容区域。 |
62
+
63
+ ### 骨架视图 Methods
64
+
65
+ 无 Options API methods。
66
+
67
+ ### 骨架视图 Internal State
68
+
69
+ | 类型 | 名称 | 说明 |
70
+ | --- | --- | --- |
71
+ | computed | `style` | 内部计算属性,用于把 props、平台信息或样式配置转换为模板可用值。 |