@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.
- package/CHANGELOG.md +16 -0
- package/LICENSE +21 -0
- package/README.md +39 -0
- package/docs/api/apis/core.md +189 -0
- package/docs/api/apis/index.md +82 -0
- package/docs/api/apis/request.md +369 -0
- package/docs/api/configs/api.md +32 -0
- package/docs/api/configs/app.md +43 -0
- package/docs/api/configs/brand.md +43 -0
- package/docs/api/configs/cdn.md +35 -0
- package/docs/api/configs/color.md +144 -0
- package/docs/api/configs/env.md +120 -0
- package/docs/api/configs/index.md +394 -0
- package/docs/api/configs/link.md +33 -0
- package/docs/api/configs/log.md +27 -0
- package/docs/api/configs/mp.md +34 -0
- package/docs/api/configs/navigate.md +27 -0
- package/docs/api/configs/page.md +32 -0
- package/docs/api/configs/path.md +27 -0
- package/docs/api/configs/storage.md +24 -0
- package/docs/api/configs/tabbar.md +29 -0
- package/docs/api/configs/toast.md +35 -0
- package/docs/api/configs/update.md +25 -0
- package/docs/api/configs/upload.md +45 -0
- package/docs/api/configs/ver.md +32 -0
- package/docs/api/configs/web.md +28 -0
- package/docs/api/hooks/index.md +182 -0
- package/docs/api/hooks/useI18n.md +27 -0
- package/docs/api/hooks/useOverlay.md +37 -0
- package/docs/api/hooks/usePopup.md +35 -0
- package/docs/api/hooks/useVersion.md +23 -0
- package/docs/api/index.md +269 -0
- package/docs/api/mixins/app.md +29 -0
- package/docs/api/mixins/badge.md +23 -0
- package/docs/api/mixins/debounce.md +32 -0
- package/docs/api/mixins/deep.md +29 -0
- package/docs/api/mixins/index.md +23 -0
- package/docs/api/mixins/login.md +22 -0
- package/docs/api/mixins/model.md +26 -0
- package/docs/api/mixins/redirect.md +26 -0
- package/docs/api/mixins/share.md +29 -0
- package/docs/api/mixins/show.md +27 -0
- package/docs/api/mixins/webview.md +27 -0
- package/docs/api/modules/app.md +30 -0
- package/docs/api/modules/dict.md +28 -0
- package/docs/api/modules/im.md +22 -0
- package/docs/api/modules/index.md +44 -0
- package/docs/api/modules/launch.md +26 -0
- package/docs/api/modules/location.md +25 -0
- package/docs/api/modules/login.md +35 -0
- package/docs/api/modules/network.md +26 -0
- package/docs/api/modules/system.md +29 -0
- package/docs/api/utils/audio.md +84 -0
- package/docs/api/utils/consts.md +201 -0
- package/docs/api/utils/cos.md +269 -0
- package/docs/api/utils/debounce.md +89 -0
- package/docs/api/utils/file.md +78 -0
- package/docs/api/utils/index.md +547 -0
- package/docs/api/utils/locale.md +32 -0
- package/docs/api/utils/message.md +81 -0
- package/docs/api/utils/navigate.md +267 -0
- package/docs/api/utils/pages.md +205 -0
- package/docs/api/utils/permission.md +28 -0
- package/docs/api/utils/permit.md +62 -0
- package/docs/api/utils/query.md +89 -0
- package/docs/api/utils/request.md +34 -0
- package/docs/api/utils/storage.md +145 -0
- package/docs/api/utils/subscribe.md +77 -0
- package/docs/api/utils/throttle.md +101 -0
- package/docs/api/utils/toast.md +164 -0
- package/docs/api/utils/uni.md +28 -0
- package/docs/api/utils/update.md +165 -0
- package/docs/components/g-back-button.md +76 -0
- package/docs/components/g-checkbox-list.md +101 -0
- package/docs/components/g-container.md +93 -0
- package/docs/components/g-data-list.md +106 -0
- package/docs/components/g-dot-text.md +79 -0
- package/docs/components/g-env.md +75 -0
- package/docs/components/g-float.md +83 -0
- package/docs/components/g-grid-image.md +91 -0
- package/docs/components/g-grid-swiper.md +99 -0
- package/docs/components/g-icon.md +106 -0
- package/docs/components/g-mask.md +82 -0
- package/docs/components/g-money.md +90 -0
- package/docs/components/g-more.md +78 -0
- package/docs/components/g-page-container.md +170 -0
- package/docs/components/g-permission-popup.md +117 -0
- package/docs/components/g-polyline-chat.md +102 -0
- package/docs/components/g-polyline-view.md +67 -0
- package/docs/components/g-popup.md +144 -0
- package/docs/components/g-refresh-view.md +118 -0
- package/docs/components/g-render-image.md +83 -0
- package/docs/components/g-search.md +120 -0
- package/docs/components/g-share-photo.md +77 -0
- package/docs/components/g-share-view.md +83 -0
- package/docs/components/g-share-weixin.md +81 -0
- package/docs/components/g-skeleton-view.md +71 -0
- package/docs/components/g-skeleton.md +64 -0
- package/docs/components/g-tag-editor.md +134 -0
- package/docs/components/g-timer.md +72 -0
- package/docs/components/g-trtc-room.md +116 -0
- package/docs/components/g-trtc-tui.md +84 -0
- package/docs/components/g-trtc.md +124 -0
- package/docs/components/g-upload.md +117 -0
- package/docs/components/g-waterfall.md +84 -0
- package/docs/components/index.md +109 -0
- package/docs/components/styles/base-styles.md +367 -0
- package/docs/components/styles/global-vars.md +150 -0
- package/docs/components/usage.md +112 -0
- package/docs/faq/index.md +78 -0
- package/docs/guide/getting-started.md +195 -0
- package/docs/guide/project-frame.md +297 -0
- package/docs/index.md +80 -0
- package/lib/apis/core.d.ts +12 -0
- package/lib/apis/core.js +13 -0
- package/lib/apis/index.d.ts +2 -0
- package/lib/apis/index.js +2 -0
- package/lib/apis/request.d.ts +4 -0
- package/lib/apis/request.js +27 -0
- package/lib/components/g-back-button/g-back-button.vue +141 -0
- package/lib/components/g-checkbox-list/g-checkbox-list.vue +156 -0
- package/lib/components/g-container/g-container.vue +159 -0
- package/lib/components/g-data-list/g-data-list.vue +192 -0
- package/lib/components/g-dot-text/g-dot-text.vue +114 -0
- package/lib/components/g-env/g-env.vue +123 -0
- package/lib/components/g-float/g-float.vue +131 -0
- package/lib/components/g-grid-image/g-grid-image.vue +84 -0
- package/lib/components/g-grid-swiper/g-grid-swiper.vue +224 -0
- package/lib/components/g-icon/g-icon.vue +72 -0
- package/lib/components/g-mask/g-mask.vue +126 -0
- package/lib/components/g-money/g-money.vue +174 -0
- package/lib/components/g-more/g-more.vue +68 -0
- package/lib/components/g-page-container/g-page-container.vue +470 -0
- package/lib/components/g-permission-popup/g-permission-popup.vue +80 -0
- package/lib/components/g-polyline-chat/g-polyline-chat.vue +255 -0
- package/lib/components/g-polyline-view/g-polyline-view.vue +104 -0
- package/lib/components/g-popup/g-popup.vue +449 -0
- package/lib/components/g-refresh-view/g-refresh-view.vue +213 -0
- package/lib/components/g-render-image/g-render-image.vue +222 -0
- package/lib/components/g-search/g-search.vue +274 -0
- package/lib/components/g-share-photo/g-share-photo.vue +75 -0
- package/lib/components/g-share-view/g-share-view.vue +157 -0
- package/lib/components/g-share-weixin/g-share-weixin.vue +106 -0
- package/lib/components/g-skeleton/g-skeleton.vue +55 -0
- package/lib/components/g-skeleton-view/g-skeleton-view.vue +78 -0
- package/lib/components/g-tag-editor/g-tag-editor.vue +482 -0
- package/lib/components/g-timer/g-timer.vue +61 -0
- package/lib/components/g-trtc/g-trtc.vue +347 -0
- package/lib/components/g-trtc-room/g-trtc-room.vue +524 -0
- package/lib/components/g-trtc-room/iconfont.scss +59 -0
- package/lib/components/g-trtc-tui/g-trtc-tui.vue +245 -0
- package/lib/components/g-upload/g-upload.vue +294 -0
- package/lib/components/g-waterfall/g-waterfall.vue +101 -0
- package/lib/configs/api.d.ts +7 -0
- package/lib/configs/api.js +6 -0
- package/lib/configs/app.d.ts +26 -0
- package/lib/configs/app.js +50 -0
- package/lib/configs/brand.d.ts +22 -0
- package/lib/configs/brand.js +26 -0
- package/lib/configs/cdn.d.ts +13 -0
- package/lib/configs/cdn.js +12 -0
- package/lib/configs/color.d.ts +62 -0
- package/lib/configs/color.js +66 -0
- package/lib/configs/env.d.ts +37 -0
- package/lib/configs/env.js +71 -0
- package/lib/configs/index.d.ts +170 -0
- package/lib/configs/index.js +82 -0
- package/lib/configs/link.d.ts +11 -0
- package/lib/configs/link.js +3 -0
- package/lib/configs/log.d.ts +9 -0
- package/lib/configs/log.js +8 -0
- package/lib/configs/mp.d.ts +15 -0
- package/lib/configs/mp.js +9 -0
- package/lib/configs/navigate.d.ts +17 -0
- package/lib/configs/navigate.js +5 -0
- package/lib/configs/page.d.ts +18 -0
- package/lib/configs/page.js +14 -0
- package/lib/configs/path.d.ts +11 -0
- package/lib/configs/path.js +10 -0
- package/lib/configs/storage.d.ts +7 -0
- package/lib/configs/storage.js +6 -0
- package/lib/configs/tabbar.d.ts +7 -0
- package/lib/configs/tabbar.js +6 -0
- package/lib/configs/toast.d.ts +18 -0
- package/lib/configs/toast.js +29 -0
- package/lib/configs/update.d.ts +45 -0
- package/lib/configs/update.js +6 -0
- package/lib/configs/upload.d.ts +30 -0
- package/lib/configs/upload.js +7 -0
- package/lib/configs/ver.d.ts +8 -0
- package/lib/configs/ver.js +28 -0
- package/lib/configs/web.d.ts +5 -0
- package/lib/configs/web.js +2 -0
- package/lib/hooks/index.d.ts +4 -0
- package/lib/hooks/index.js +4 -0
- package/lib/hooks/useI18n.d.ts +2 -0
- package/lib/hooks/useI18n.js +19 -0
- package/lib/hooks/useOverlay.d.ts +1 -0
- package/lib/hooks/useOverlay.js +17 -0
- package/lib/hooks/usePopup.d.ts +1 -0
- package/lib/hooks/usePopup.js +14 -0
- package/lib/hooks/useVersion.d.ts +6 -0
- package/lib/hooks/useVersion.js +21 -0
- package/lib/index.d.ts +26 -0
- package/lib/index.js +33 -0
- package/lib/mixins/app.d.ts +14 -0
- package/lib/mixins/app.js +105 -0
- package/lib/mixins/badge.d.ts +24 -0
- package/lib/mixins/badge.js +44 -0
- package/lib/mixins/debounce.d.ts +6 -0
- package/lib/mixins/debounce.js +11 -0
- package/lib/mixins/deep.d.ts +6 -0
- package/lib/mixins/deep.js +8 -0
- package/lib/mixins/index.d.ts +8 -0
- package/lib/mixins/index.js +8 -0
- package/lib/mixins/login.d.ts +4 -0
- package/lib/mixins/login.js +25 -0
- package/lib/mixins/model.d.ts +22 -0
- package/lib/mixins/model.js +29 -0
- package/lib/mixins/redirect.d.ts +8 -0
- package/lib/mixins/redirect.js +94 -0
- package/lib/mixins/share.d.ts +15 -0
- package/lib/mixins/share.js +55 -0
- package/lib/mixins/show.d.ts +9 -0
- package/lib/mixins/show.js +16 -0
- package/lib/mixins/webview.d.ts +26 -0
- package/lib/mixins/webview.js +225 -0
- package/lib/modules/app.d.ts +5 -0
- package/lib/modules/app.js +19 -0
- package/lib/modules/dict.d.ts +8 -0
- package/lib/modules/dict.js +43 -0
- package/lib/modules/im.d.ts +6 -0
- package/lib/modules/im.js +105 -0
- package/lib/modules/index.d.ts +8 -0
- package/lib/modules/index.js +8 -0
- package/lib/modules/launch.d.ts +5 -0
- package/lib/modules/launch.js +32 -0
- package/lib/modules/location.d.ts +5 -0
- package/lib/modules/location.js +57 -0
- package/lib/modules/login.d.ts +5 -0
- package/lib/modules/login.js +72 -0
- package/lib/modules/network.d.ts +5 -0
- package/lib/modules/network.js +39 -0
- package/lib/modules/system.d.ts +5 -0
- package/lib/modules/system.js +65 -0
- package/lib/styles/animate-vue.scss +3 -0
- package/lib/styles/animate.scss +27 -0
- package/lib/styles/bg-vue.scss +21 -0
- package/lib/styles/bg.scss +93 -0
- package/lib/styles/border.scss +218 -0
- package/lib/styles/flex-nvue.scss +64 -0
- package/lib/styles/flex-vue.scss +75 -0
- package/lib/styles/font.scss +59 -0
- package/lib/styles/index.scss +25 -0
- package/lib/styles/layout-nvue.scss +24 -0
- package/lib/styles/layout-vue.scss +30 -0
- package/lib/styles/layout.scss +76 -0
- package/lib/styles/opacity.scss +10 -0
- package/lib/styles/reset-vue.scss +46 -0
- package/lib/styles/shadow.scss +12 -0
- package/lib/styles/sizing-vue.scss +21 -0
- package/lib/styles/sizing.scss +21 -0
- package/lib/styles/spacing.scss +234 -0
- package/lib/styles/text-nvue.scss +21 -0
- package/lib/styles/text-vue.scss +70 -0
- package/lib/styles/text.scss +122 -0
- package/lib/styles/var.module.scss +29 -0
- package/lib/utils/audio.d.ts +14 -0
- package/lib/utils/audio.js +43 -0
- package/lib/utils/consts.d.ts +30 -0
- package/lib/utils/consts.js +52 -0
- package/lib/utils/cos.d.ts +15 -0
- package/lib/utils/cos.js +140 -0
- package/lib/utils/debounce.d.ts +2 -0
- package/lib/utils/debounce.js +30 -0
- package/lib/utils/file.d.ts +28 -0
- package/lib/utils/file.js +292 -0
- package/lib/utils/index.d.ts +166 -0
- package/lib/utils/index.js +485 -0
- package/lib/utils/locale.d.ts +6 -0
- package/lib/utils/locale.js +19 -0
- package/lib/utils/message.d.ts +9 -0
- package/lib/utils/message.js +63 -0
- package/lib/utils/navigate.d.ts +27 -0
- package/lib/utils/navigate.js +183 -0
- package/lib/utils/pages.d.ts +21 -0
- package/lib/utils/pages.js +79 -0
- package/lib/utils/permission.d.ts +16 -0
- package/lib/utils/permission.js +291 -0
- package/lib/utils/permit.d.ts +30 -0
- package/lib/utils/permit.js +181 -0
- package/lib/utils/query.d.ts +13 -0
- package/lib/utils/query.js +14 -0
- package/lib/utils/request.d.ts +8 -0
- package/lib/utils/request.js +126 -0
- package/lib/utils/storage.d.ts +53 -0
- package/lib/utils/storage.js +145 -0
- package/lib/utils/subscribe.d.ts +7 -0
- package/lib/utils/subscribe.js +94 -0
- package/lib/utils/throttle.d.ts +2 -0
- package/lib/utils/throttle.js +32 -0
- package/lib/utils/toast.d.ts +17 -0
- package/lib/utils/toast.js +66 -0
- package/lib/utils/uni.d.ts +1 -0
- package/lib/utils/uni.js +147 -0
- package/lib/utils/update.d.ts +9 -0
- package/lib/utils/update.js +376 -0
- package/package.json +49 -0
- package/types/index.d.ts +25 -0
- 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、平台信息或样式配置转换为模板可用值。 |
|