stellar-ui-v2 1.40.21 → 1.40.23

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.
@@ -14,19 +14,19 @@
14
14
  <scroll-view class="footer-scroll-view" scroll-x="true">
15
15
  <view class="footer-share-list">
16
16
  <view class="footer-item" @click="handShare('WXSceneSession')">
17
- <image class="footer-icon" src="../../static/weixin.png" mode="widthFix"></image>
17
+ <image class="footer-icon" src="https://image.whzb.com/chain/StellarUI/font/weixin.png" mode="widthFix"></image>
18
18
  <text>微信好友</text>
19
19
  </view>
20
20
  <view class="footer-item" @click="handShare('WXSceneTimeline')">
21
- <image class="footer-icon" src="../../static/wxpyq.png" mode="widthFix"></image>
21
+ <image class="footer-icon" src="https://image.whzb.com/chain/StellarUI/font/wxpyq.png" mode="widthFix"></image>
22
22
  <text>朋友圈</text>
23
23
  </view>
24
24
  <view class="footer-item" @click="handShare('WXSceneFavorite')">
25
- <image class="footer-icon" src="../../static/shoucang.png" mode="widthFix"></image>
25
+ <image class="footer-icon" src="https://image.whzb.com/chain/StellarUI/font/shoucang.png" mode="widthFix"></image>
26
26
  <text>微信收藏</text>
27
27
  </view>
28
28
  <view class="footer-item" @click="downloadPoster" v-if="viewPoster">
29
- <image class="footer-icon" src="../../static/haibao.png" mode="widthFix"></image>
29
+ <image class="footer-icon" src="https://image.whzb.com/chain/StellarUI/font/haibao.png" mode="widthFix"></image>
30
30
  <text>生成海报</text>
31
31
  </view>
32
32
  </view>
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <view class="update-mask flex-center" v-if="open">
3
3
  <view class="update-content">
4
- <image class="update-image" src="../../static/app_update_img.png"></image>
4
+ <image class="update-image" src="https://image.whzb.com/chain/StellarUI/font/app_update_img.png"></image>
5
5
 
6
6
  <view class="update-title">发现新版本</view>
7
7
  <view class="update-version">v{{ data.name }}</view>
@@ -1,149 +1,149 @@
1
- # PageContainer 页面容器
2
-
3
- ---$
4
-
5
- ### 说明
6
- `ste-pate-container` 在不同平台的实现方式:
7
-
8
- - `MP-WEIXIN`:使用微信小程序原生 `page-container`
9
- - 其他平台:基于 `ste-popup` 兼容实现
10
- - 微信单页限制:原生 `page-container` 同一页面仅允许 1 个实例;当页面存在多个 `ste-pate-container` 时,首个实例使用原生能力,其余实例自动降级为 `ste-popup`
11
-
12
- 为保持 API 一致,组件对外暴露 `page-container` 常用属性和事件。
13
-
14
- ---$
15
-
16
- ### 代码演示
17
-
18
- #### 基础用法
19
- ```vue
20
- <template>
21
- <ste-pate-container
22
- :show.sync="show"
23
- position="bottom"
24
- :overlay="true"
25
- :round="true"
26
- custom-style="height: 60vh;"
27
- >
28
- <view class="content">内容区域</view>
29
- </ste-pate-container>
30
- </template>
31
-
32
- <script>
33
- export default {
34
- data() {
35
- return {
36
- show: false,
37
- };
38
- },
39
- };
40
- </script>
41
- ```
42
-
43
- #### 方法调用
44
- ```vue
45
- <template>
46
- <ste-pate-container ref="pc" :show.sync="show">
47
- <view>内容区域</view>
48
- </ste-pate-container>
49
- </template>
50
-
51
- <script>
52
- export default {
53
- data() {
54
- return {
55
- show: false,
56
- };
57
- },
58
- methods: {
59
- openBox() {
60
- this.$refs.pc.open();
61
- },
62
- closeBox() {
63
- this.$refs.pc.close();
64
- },
65
- },
66
- };
67
- </script>
68
- ```
69
-
70
- #### 事件监听
71
- ```vue
72
- <ste-pate-container
73
- :show.sync="show"
74
- @beforeenter="onEvent('beforeenter')"
75
- @afterenter="onEvent('afterenter')"
76
- @clickoverlay="onEvent('clickoverlay')"
77
- >
78
- <view>内容区域</view>
79
- </ste-pate-container>
80
- ```
81
-
82
- #### 微信专属属性
83
- ```vue
84
- <ste-pate-container
85
- :show.sync="show"
86
- :closeOnSlideDown="true"
87
- overlayStyle="background: rgba(0, 144, 255, 0.45);"
88
- customStyle="height: 50vh;"
89
- >
90
- <view>微信小程序下支持下滑关闭和自定义遮罩样式</view>
91
- </ste-pate-container>
92
- ```
93
-
94
- ---$
95
-
96
- ### API
97
-
98
- #### Props
99
-
100
- | 属性名 | 说明 | 类型 | 默认值 | 平台支持 |
101
- | --- | --- | --- | --- | --- |
102
- | `show` | 是否显示容器 | `Boolean` | `false` | 全平台 |
103
- | `duration` | 动画时长,单位 ms | `Number` | `300` | 全平台 |
104
- | `zIndex` | 层级 | `Number/String` | `100` | 全平台 |
105
- | `overlay` | 是否显示遮罩 | `Boolean` | `true` | 全平台 |
106
- | `position` | 弹出位置:`top`/`bottom`/`right`/`center` | `String` | `bottom` | 全平台 |
107
- | `round` | 是否展示圆角 | `Boolean` | `false` | 全平台 |
108
- | `customStyle` | 容器样式 | `String` | `''` | 全平台 |
109
- | `safeAreaInsetBottom` | 是否适配底部安全区 | `Boolean` | `false` | 全平台(非微信为兼容实现) |
110
- | `closeOnSlideDown` | 是否允许下滑关闭 | `Boolean` | `false` | 仅微信小程序 |
111
- | `overlayStyle` | 遮罩层样式 | `String` | `''` | 仅微信小程序 |
112
-
113
- #### Events
114
-
115
- | 事件名 | 说明 | 平台支持 |
116
- | --- | --- | --- |
117
- | `beforeenter` | 进入前触发 | 全平台(非微信为兼容模拟) |
118
- | `enter` | 进入中触发 | 全平台(非微信为兼容模拟) |
119
- | `afterenter` | 进入结束触发 | 全平台 |
120
- | `beforeleave` | 离开前触发 | 全平台(非微信为兼容模拟) |
121
- | `leave` | 离开中触发 | 全平台(非微信为兼容模拟) |
122
- | `afterleave` | 离开结束触发 | 全平台(非微信为兼容模拟) |
123
- | `clickoverlay` | 点击遮罩触发 | 全平台 |
124
- | `update:show` | 显隐双向绑定事件 | 全平台 |
125
-
126
- #### Methods
127
-
128
- | 方法名 | 说明 | 参数 |
129
- | --- | --- | --- |
130
- | `open` | 打开容器 | - |
131
- | `close` | 关闭容器 | - |
132
-
133
- ---$
134
-
135
- ### 非微信平台兼容差异
136
-
137
- 以下能力在非微信平台基于 `ste-popup` 兼容,无法完全等效原生 `page-container`:
138
-
139
- - `closeOnSlideDown`:不支持
140
- - `overlayStyle`:不支持
141
- - 原生手势与生命周期细节存在实现差异
142
-
143
- 微信端多实例场景说明:
144
-
145
- - 同一页面第一个 `ste-pate-container` 使用原生 `page-container`
146
- - 后续实例自动降级为 `ste-popup`,避免触发 `Only one instance can exist` 报错
147
-
148
- ---$
149
- {{fuyuwei}}
1
+ # PageContainer 页面容器
2
+
3
+ ---$
4
+
5
+ ### 说明
6
+ `ste-page-container` 在不同平台的实现方式:
7
+
8
+ - `MP-WEIXIN`:使用微信小程序原生 `page-container`
9
+ - 其他平台:基于 `ste-popup` 兼容实现
10
+ - 微信单页限制:原生 `page-container` 同一页面仅允许 1 个实例;当页面存在多个 `ste-page-container` 时,首个实例使用原生能力,其余实例自动降级为 `ste-popup`
11
+
12
+ 为保持 API 一致,组件对外暴露 `page-container` 常用属性和事件。
13
+
14
+ ---$
15
+
16
+ ### 代码演示
17
+
18
+ #### 基础用法
19
+ ```vue
20
+ <template>
21
+ <ste-page-container
22
+ :show.sync="show"
23
+ position="bottom"
24
+ :overlay="true"
25
+ :round="true"
26
+ custom-style="height: 60vh;"
27
+ >
28
+ <view class="content">内容区域</view>
29
+ </ste-page-container>
30
+ </template>
31
+
32
+ <script>
33
+ export default {
34
+ data() {
35
+ return {
36
+ show: false,
37
+ };
38
+ },
39
+ };
40
+ </script>
41
+ ```
42
+
43
+ #### 方法调用
44
+ ```vue
45
+ <template>
46
+ <ste-page-container ref="pc" :show.sync="show">
47
+ <view>内容区域</view>
48
+ </ste-page-container>
49
+ </template>
50
+
51
+ <script>
52
+ export default {
53
+ data() {
54
+ return {
55
+ show: false,
56
+ };
57
+ },
58
+ methods: {
59
+ openBox() {
60
+ this.$refs.pc.open();
61
+ },
62
+ closeBox() {
63
+ this.$refs.pc.close();
64
+ },
65
+ },
66
+ };
67
+ </script>
68
+ ```
69
+
70
+ #### 事件监听
71
+ ```vue
72
+ <ste-page-container
73
+ :show.sync="show"
74
+ @beforeenter="onEvent('beforeenter')"
75
+ @afterenter="onEvent('afterenter')"
76
+ @clickoverlay="onEvent('clickoverlay')"
77
+ >
78
+ <view>内容区域</view>
79
+ </ste-page-container>
80
+ ```
81
+
82
+ #### 微信专属属性
83
+ ```vue
84
+ <ste-page-container
85
+ :show.sync="show"
86
+ :closeOnSlideDown="true"
87
+ overlayStyle="background: rgba(0, 144, 255, 0.45);"
88
+ customStyle="height: 50vh;"
89
+ >
90
+ <view>微信小程序下支持下滑关闭和自定义遮罩样式</view>
91
+ </ste-page-container>
92
+ ```
93
+
94
+ ---$
95
+
96
+ ### API
97
+
98
+ #### Props
99
+
100
+ | 属性名 | 说明 | 类型 | 默认值 | 平台支持 |
101
+ | --- | --- | --- | --- | --- |
102
+ | `show` | 是否显示容器 | `Boolean` | `false` | 全平台 |
103
+ | `duration` | 动画时长,单位 ms | `Number` | `300` | 全平台 |
104
+ | `zIndex` | 层级 | `Number/String` | `100` | 全平台 |
105
+ | `overlay` | 是否显示遮罩 | `Boolean` | `true` | 全平台 |
106
+ | `position` | 弹出位置:`top`/`bottom`/`right`/`center` | `String` | `bottom` | 全平台 |
107
+ | `round` | 是否展示圆角 | `Boolean` | `false` | 全平台 |
108
+ | `customStyle` | 容器样式 | `String` | `''` | 全平台 |
109
+ | `safeAreaInsetBottom` | 是否适配底部安全区 | `Boolean` | `false` | 全平台(非微信为兼容实现) |
110
+ | `closeOnSlideDown` | 是否允许下滑关闭 | `Boolean` | `false` | 仅微信小程序 |
111
+ | `overlayStyle` | 遮罩层样式 | `String` | `''` | 仅微信小程序 |
112
+
113
+ #### Events
114
+
115
+ | 事件名 | 说明 | 平台支持 |
116
+ | --- | --- | --- |
117
+ | `beforeenter` | 进入前触发 | 全平台(非微信为兼容模拟) |
118
+ | `enter` | 进入中触发 | 全平台(非微信为兼容模拟) |
119
+ | `afterenter` | 进入结束触发 | 全平台 |
120
+ | `beforeleave` | 离开前触发 | 全平台(非微信为兼容模拟) |
121
+ | `leave` | 离开中触发 | 全平台(非微信为兼容模拟) |
122
+ | `afterleave` | 离开结束触发 | 全平台(非微信为兼容模拟) |
123
+ | `clickoverlay` | 点击遮罩触发 | 全平台 |
124
+ | `update:show` | 显隐双向绑定事件 | 全平台 |
125
+
126
+ #### Methods
127
+
128
+ | 方法名 | 说明 | 参数 |
129
+ | --- | --- | --- |
130
+ | `open` | 打开容器 | - |
131
+ | `close` | 关闭容器 | - |
132
+
133
+ ---$
134
+
135
+ ### 非微信平台兼容差异
136
+
137
+ 以下能力在非微信平台基于 `ste-popup` 兼容,无法完全等效原生 `page-container`:
138
+
139
+ - `closeOnSlideDown`:不支持
140
+ - `overlayStyle`:不支持
141
+ - 原生手势与生命周期细节存在实现差异
142
+
143
+ 微信端多实例场景说明:
144
+
145
+ - 同一页面第一个 `ste-page-container` 使用原生 `page-container`
146
+ - 后续实例自动降级为 `ste-popup`,避免触发 `Only one instance can exist` 报错
147
+
148
+ ---$
149
+ {{fuyuwei}}
@@ -1,5 +1,5 @@
1
- {
2
- "group": "基础组件",
3
- "title": "PageContainer 页面容器",
4
- "icon": "https://image.whzb.com/chain/StellarUI/组件图标/popup.png"
5
- }
1
+ {
2
+ "group": "基础组件",
3
+ "title": "PageContainer 页面容器",
4
+ "icon": "https://image.whzb.com/chain/StellarUI/组件图标/popup.png"
5
+ }