stellar-ui-v2 1.36.0 → 1.36.2

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 (8) hide show
  1. package/README.md +57 -57
  2. package/components/ste-calendar/README.md +1 -1
  3. package/components/ste-message-box/README.md +3 -3
  4. package/components/ste-qrcode/ste-qrcode.vue +94 -40
  5. package/components/ste-toast/README.md +2 -2
  6. package/components/ste-video/props.js +149 -149
  7. package/components/ste-video/ste-video.vue +5 -3
  8. package/package.json +3 -3
package/README.md CHANGED
@@ -1,28 +1,28 @@
1
- <p align="center">
2
- <img alt="logo" src="https://image.whzb.com/chain/StellarUI/logo.png" width="200">
3
- </p>
4
- <h1 align="center">StellarUI</h1>
5
-
6
- <p align="center">📱 一个基于vue2构建，打造的uni-app组件库</p>
7
-
8
- <p align="center">
9
- 🚀 <a href="https://StellarUI.cn">文档网站</a>&nbsp;
10
-
11
- ## ✨ 特性
12
-
1
+ <p align="center">
2
+ <img alt="logo" src="https://image.whzb.com/chain/StellarUI/logo.png" width="200">
3
+ </p>
4
+ <h1 align="center">StellarUI</h1>
5
+
6
+ <p align="center">📱 一个基于vue2构建，打造的uni-app组件库</p>
7
+
8
+ <p align="center">
9
+ 🚀 <a href="https://stellar-ui.intecloud.com.cn/pc/index/index">文档网站</a>&nbsp;
10
+
11
+ ## ✨ 特性
12
+
13
13
  - 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
14
14
  - 🚀 40+ 个高质量组件，覆盖移动端主流场景.
15
15
  - 📖 提供丰富的文档和组件示例.
16
- - 🎨 支持修改 CSS 变量实现主题定制.
17
-
18
- ## 📱 预览
19
-
20
- 扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以 clone 代码到本地预览。
21
-
22
- <p style="display:flex;gap:24px">
23
- <img src="https://image.whzb.com/chain/StellarUI/%E5%BE%AE%E4%BF%A1.jpg" width="200" height="200"/>
24
- <img src="https://image.whzb.com/chain/StellarUI/%E6%94%AF%E4%BB%98%E5%AE%9D.png" width="200" height="200" />
25
- </p>
16
+ - 🎨 支持修改 CSS 变量实现主题定制.
17
+
18
+ ## 📱 预览
19
+
20
+ 扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以 clone 代码到本地预览。
21
+
22
+ <p style="display:flex;gap:24px">
23
+ <img src="https://image.whzb.com/chain/StellarUI/%E5%BE%AE%E4%BF%A1.jpg" width="200" height="200"/>
24
+ <img src="https://image.whzb.com/chain/StellarUI/%E6%94%AF%E4%BB%98%E5%AE%9D.png" width="200" height="200" />
25
+ </p>
26
26
 
27
27
  ## 平台支持
28
28
 
@@ -30,19 +30,19 @@
30
30
  |:-:|:-: |:-: |:-: |:-: |:-: |:-: |
31
31
  |x |√ |√ |√ |× |× |× |
32
32
 
33
- ## 安装
34
-
35
- ```bash [npm]
36
- npm i stellar-ui-v2 -S
33
+ ## 安装
34
+
35
+ ```bash [npm]
36
+ npm i stellar-ui-v2 -S
37
37
  ```
38
-
39
- ## 快速上手
40
-
41
- 详细说明见 [快速上手](https://stellar-ui.intecloud.com.cn/pc/index/index?name=handbook-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)。
42
-
43
-
44
- ## 优秀案例
45
-
38
+
39
+ ## 快速上手
40
+
41
+ 详细说明见 [快速上手](https://stellar-ui.intecloud.com.cn/pc/index/index?name=handbook-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)。
42
+
43
+
44
+ ## 优秀案例
45
+
46
46
  我们非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/wuhanshuzhiyun/StellarUI/issues/1) 提交案例。
47
47
 
48
48
  <table boder="0">
@@ -72,19 +72,19 @@ npm i stellar-ui-v2 -S
72
72
  </td>
73
73
  </tr>
74
74
  </table>
75
-
76
- ## 周边生态
77
-
78
- | 项目 | 描述 |
79
- | --- | --- |
80
- |[StellarPlus](https://stellar-ui.intecloud.com.cn/plus/#/) | 一个基于vue3构建，打造的uni-app组件库 |
81
- |[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
82
- |[ste-helper](https://marketplace.visualstudio.com/items?itemName=StellarUI.ste-helper) |旨在帮助开发者更加有效率的使用 StellarPlus来开发项目的vscode插件 |
83
-
84
-
75
+
76
+ ## 周边生态
77
+
78
+ | 项目 | 描述 |
79
+ | --- | --- |
80
+ |[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建，打造的uni-app组件库 |
81
+ |[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
82
+ |[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
83
+ |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli) |stellar配套的脚手架 |
84
+
85
85
  ## 核心团队
86
86
  以下是`StellarUI`的核心贡献者们：
87
-
87
+
88
88
  <table border="0">
89
89
  <tr>
90
90
  <td>
@@ -158,20 +158,20 @@ npm i stellar-ui-v2 -S
158
158
  </p>
159
159
  </td>
160
160
  </tr>
161
- </table>
161
+ </table>
162
162
 
163
163
  ### 贡献者们
164
164
 
165
- 感谢以下小伙伴们为 `StellarUI` 发展做出的贡献：
166
-
167
- <a href="https://github.com/wuhanshuzhiyun/StellarUI/graphs/contributors">
168
- <img src="https://contrib.rocks/image?repo=wuhanshuzhiyun/StellarUI" alt="contributors">
165
+ 感谢以下小伙伴们为 `StellarUI` 发展做出的贡献：
166
+
167
+ <a href="https://github.com/wuhanshuzhiyun/stellar-ui/graphs/contributors">
168
+ <img src="https://contrib.rocks/image?repo=wuhanshuzhiyun/stellar-ui" alt="contributors">
169
169
  </a>
170
-
171
- ## 鸣谢
172
- - [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 StellarUI 能够更方便地使用。
173
-
174
-
175
- ## 开源协议
176
-
170
+
171
+ ## 鸣谢
172
+ - [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 StellarUI 能够更方便地使用。
173
+
174
+
175
+ ## 开源协议
176
+
177
177
  本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
package/components/ste-calendar/README.md CHANGED
@@ -217,7 +217,7 @@
217
217
  />
218
218
 
219
219
  <script>
220
- import utils from 'stellar-ui/utils/utils';
220
+ import utils from 'stellar-ui-v2/utils/utils';
221
221
  export default{
222
222
  data(){
223
223
  return {
package/components/ste-message-box/README.md CHANGED
@@ -37,7 +37,7 @@ Vue.mixin(mixin);
37
37
  ```
38
38
  5. 在混淆文件`app-mixin.js`里引入组件的`js`文件,将`showToast`和`hideToast`方法混入全局，每个页面通过 `this.` 来使用对应的方法
39
39
  ```
40
- import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
40
+ import useSteMsgBox from '@/node_modules/stellar-ui-v2/components/ste-message-box/ste-message-box.js';
41
41
  let steMsgBox = useSteMsgBox();
42
42
  export default {
43
43
  methods: {
@@ -49,7 +49,7 @@ export default {
49
49
  ```
50
50
  6. js文件中使用
51
51
  ```
52
- import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
52
+ import useSteMsgBox from '@/node_modules/stellar-ui-v2/components/ste-message-box/ste-message-box.js';
53
53
  let steMsgBox = useSteMsgBox();
54
54
  steMsgBox.showMsgBox();
55
55
  ```
@@ -138,7 +138,7 @@ msgBoxInput() {
138
138
  </view>
139
139
  </ste-message-box>
140
140
  <script>
141
- import useSteMsgBox from '@/node_modules/stellar-ui/components/ste-message-box/ste-message-box.js';
141
+ import useSteMsgBox from '@/node_modules/stellar-ui-v2/components/ste-message-box/ste-message-box.js';
142
142
  const msgBox = useSteMsgBox('myMsgBox');
143
143
  export default {
144
144
  data() {
package/components/ste-qrcode/ste-qrcode.vue CHANGED
@@ -1,12 +1,14 @@
1
1
  <template>
2
- <view class="ste-qrcode-root">
3
- <!-- #ifdef H5 -->
4
- <canvas :style="[compCanvasStyle]" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
5
- <!-- #endif -->
2
+ <view class="ste-qrcode-root" :style="{ width: `${size}px`, height: `${size}px` }">
3
+ <view class="canvas-wrapper">
4
+ <!-- #ifdef H5 -->
5
+ <canvas :style="[compCanvasStyle]" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
6
+ <!-- #endif -->
6
7
 
7
- <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
8
- <canvas type="2d" :id="canvasId" :style="[compCanvasStyle]" class="mp-canvas"></canvas>
9
- <!-- #endif -->
8
+ <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
9
+ <canvas type="2d" :id="canvasId" :style="[compCanvasStyle]" class="mp-canvas"></canvas>
10
+ <!-- #endif -->
11
+ </view>
10
12
  </view>
11
13
  </template>
12
14
 
@@ -88,41 +90,39 @@ export default {
88
90
  return {
89
91
  width: this.canvasWidth + 'px',
90
92
  height: this.canvasHeight + 'px',
93
+ transform: `scale(${this.size / this.canvasWidth}, ${this.size / this.canvasHeight})`,
91
94
  };
92
95
  },
93
96
  },
94
97
  watch: {
95
98
  content: {
96
99
  handler() {
97
- this.$nextTick(() => {
98
- this.initCanvas();
99
- });
100
+ this.initCanvas();
100
101
  },
101
102
  immediate: true,
102
103
  },
103
104
  },
104
105
  methods: {
105
106
  initCanvas() {
106
- const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
107
- let context = res;
108
- // #ifndef H5
109
- context = res.getContext('2d');
110
- const dpr = utils.System.getWindowInfo().pixelRatio;
111
- res.width = this.size * dpr;
112
- res.height = this.size * dpr;
113
- context.scale(dpr, dpr);
114
- // #endif
107
+ if (!this.content) return;
108
+ this.$nextTick(() => {
109
+ const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
110
+ let context = res;
111
+ // #ifndef H5
112
+ context = res.getContext('2d');
113
+ // #endif
115
114
 
116
- this.draw(context, res);
115
+ this.draw(context, res);
116
+ });
117
117
  });
118
118
  },
119
119
  draw(ctx, canvas) {
120
120
  const qr = new UQRCode();
121
- // qr.useDynamicSize = true;
121
+ qr.useDynamicSize = true;
122
122
 
123
123
  qr.backgroundColor = this.background;
124
124
  qr.foregroundColor = this.foreground;
125
- qr.foregroundImageSrc = this.foregroundImageSrc;
125
+ qr.foregroundImageSrc = this.foregroundImageSrc ? `${this.foregroundImageSrc}?${new Date().getTime()}` : '';
126
126
  this.foregroundImageWidth ? (qr.foregroundImageWidth = this.foregroundImageWidth) : '';
127
127
  this.foregroundImageHeight ? (qr.foregroundImageHeight = this.foregroundImageHeight) : '';
128
128
  // 设置二维码内容
@@ -132,33 +132,87 @@ export default {
132
132
  // 调用制作二维码方法
133
133
  qr.make();
134
134
 
135
+ // #ifdef MP-WEIXIN || MP-ALIPAY
136
+
137
+ const dpr = utils.System.getWindowInfo().pixelRatio;
138
+ canvas.width = qr.dynamicSize * dpr;
139
+ canvas.height = qr.dynamicSize * dpr;
140
+ ctx.scale(dpr, dpr);
141
+
142
+ qr.loadImage = (src) => {
143
+ // 需要返回Promise对象，小程序下获取网络图片信息需先配置download域名白名单才能生效
144
+ return new Promise((resolve, reject) => {
145
+ var img = canvas.createImage();
146
+ img.src = src;
147
+ img.onload = () => {
148
+ // resolve返回img
149
+ resolve(img);
150
+ };
151
+ img.onerror = (err) => {
152
+ // reject返回错误信息
153
+ reject(err);
154
+ };
155
+ });
156
+ };
157
+ // #endif
158
+
159
+ // #ifdef H5
160
+ this.canvasWidth = qr.dynamicSize;
161
+ this.canvasHeight = qr.dynamicSize;
162
+
163
+ qr.loadImage = (src) => {
164
+ // 需要返回Promise对象
165
+ return new Promise((resolve, reject) => {
166
+ uni.getImageInfo({
167
+ src,
168
+ success: (res) => {
169
+ resolve(res.path);
170
+ },
171
+ fail: (err) => {
172
+ // reject返回错误信息
173
+ reject(err);
174
+ },
175
+ });
176
+ });
177
+ };
178
+
179
+ // #endif
180
+
135
181
  // 设置uQRCode实例的canvas上下文
136
182
  qr.canvasContext = ctx;
137
183
  // 调用绘制方法将二维码图案绘制到canvas上
138
- qr.drawCanvas();
139
- qr.loadImage().then(() => {
140
- uni.canvasToTempFilePath({
141
- canvas: canvas,
142
- canvasId: this.canvasId,
143
- complete: (res) => {
144
- if (!res || !res.tempFilePath) {
145
- console.error('图片生成失败');
146
- } else {
147
- this.$emit('loadImage', res.tempFilePath);
148
- }
149
- },
184
+ setTimeout(() => {
185
+ qr.drawCanvas().then(() => {
186
+ setTimeout(() => {
187
+ uni.canvasToTempFilePath({
188
+ canvas: canvas,
189
+ canvasId: this.canvasId,
190
+
191
+ complete: (res) => {
192
+ if (!res || !res.tempFilePath) {
193
+ console.error('图片生成失败');
194
+ } else {
195
+ this.$emit('loadImage', res.tempFilePath);
196
+ }
197
+ },
198
+ });
199
+ }, 1500);
150
200
  });
151
- });
201
+ }, 300);
152
202
  },
153
203
  },
154
204
  };
155
205
  </script>
156
206
 
157
- <style>
207
+ <style lang="scss" scoped>
158
208
  .ste-qrcode-root {
159
- width: fit-content;
160
- display: flex;
161
- justify-content: center;
162
- align-items: center;
209
+ // width: fit-content;
210
+ // display: flex;
211
+ // justify-content: center;
212
+ // align-items: center;
213
+ position: relative;
214
+ .h5-canvas {
215
+ transform-origin: top left;
216
+ }
163
217
  }
164
218
  </style>
package/components/ste-toast/README.md CHANGED
@@ -40,7 +40,7 @@ Vue.mixin(mixin);
40
40
  ```
41
41
  5. 在混淆文件`app-mixin.js`里引入组件的`js`文件,将`showToast`和`hideToast`方法混入全局，每个页面通过 `this.` 来使用对应的方法
42
42
  ```
43
- import useSteToast from '@/node_modules/stellar-ui/components/ste-toast/ste-toast.js';
43
+ import useSteToast from '@/node_modules/stellar-ui-v2/components/ste-toast/ste-toast.js';
44
44
  let steToast = useSteToast();
45
45
  export default {
46
46
  methods: {
@@ -56,7 +56,7 @@ export default {
56
56
  ```
57
57
  6. js文件中使用
58
58
  ```
59
- import useSteToast from '@/node_modules/stellar-ui/components/ste-toast/ste-toast.js';
59
+ import useSteToast from '@/node_modules/stellar-ui-v2/components/ste-toast/ste-toast.js';
60
60
  let steToast = useSteToast();
61
61
  steToast.showToast()
62
62
  ```
package/components/ste-video/props.js CHANGED
@@ -1,149 +1,149 @@
1
- export default {
2
- props: {
3
- // 视频的标题，全屏时在顶部展示
4
- title: {
5
- type: [String, null],
6
- default: '',
7
- },
8
- // 是否视频高度跟随父容器
9
- autoHeight: {
10
- type: [Boolean, null],
11
- default: false,
12
- },
13
- // 清晰度
14
- resolution: {
15
- type: [Array, null],
16
- default: () => [],
17
- },
18
- // 要播放视频的资源地址
19
- src: {
20
- type: [String, null],
21
- default: '',
22
- },
23
- // 是否自动播放
24
- autoplay: {
25
- type: [Boolean, null],
26
- default: false,
27
- },
28
- // 是否循环播放
29
- loop: {
30
- type: [Boolean, null],
31
- default: false,
32
- },
33
- // 是否静音播放
34
- muted: {
35
- type: [Boolean, null],
36
- default: false,
37
- },
38
- // 指定视频初始播放位置，单位为秒（s）。
39
- initialTime: {
40
- type: [Number, null],
41
- default: 0,
42
- },
43
- // 指定视频时长，单位为秒（s）。
44
- duration: {
45
- type: [Number, null],
46
- default: 0,
47
- },
48
- // 在非全屏模式下，是否开启亮度与音量调节手势
49
- pageGesture: {
50
- type: [Boolean, null],
51
- default: false,
52
- },
53
- // 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
54
- direction: {
55
- type: [Number, null],
56
- default: 0,
57
- },
58
- // 是否显示全屏按钮
59
- showFullscreenBtn: {
60
- type: [Boolean, null],
61
- default: true,
62
- },
63
- // 是否显示视频底部控制栏的播放按钮
64
- showPlayBtn: {
65
- type: [Boolean, null],
66
- default: true,
67
- },
68
- // 是否开启控制进度的手势
69
- enableProgressGesture: {
70
- type: [Boolean, null],
71
- default: true,
72
- },
73
- // 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
74
- objectFit: {
75
- type: [String, null],
76
- default: 'contain',
77
- },
78
- // 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
79
- poster: {
80
- type: [String, null],
81
- default: '',
82
- },
83
- // 移动网络提醒样式：0是不提醒，1是提醒，默认值为1
84
- mobileNetHintType: {
85
- type: [Number, null],
86
- default: 1,
87
- },
88
- // 是否开启手势播放
89
- enablePlayGesture: {
90
- type: [Boolean, null],
91
- default: false,
92
- },
93
- // 当跳转到其它小程序页面时，是否自动暂停本页面的视频
94
- autoPauseIfNavigate: {
95
- type: [Boolean, null],
96
- default: true,
97
- },
98
- // 当跳转到其它微信原生页面时，是否自动暂停本页面的视频
99
- autoPauseIfOpenNative: {
100
- type: [Boolean, null],
101
- default: true,
102
- },
103
- // 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
104
- vslideGesture: {
105
- type: [Boolean, null],
106
- default: false,
107
- },
108
- // 在全屏模式下，是否开启亮度与音量调节手势
109
- vslideGestureInFullscreen: {
110
- type: [Boolean, null],
111
- default: true,
112
- },
113
- // 视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html)
114
- adUnitId: {
115
- type: [String, null],
116
- default: '',
117
- },
118
- // 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
119
- posterForCrawler: {
120
- type: [String, null],
121
- default: '',
122
- },
123
- // 解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码；
124
- codec: {
125
- type: [String, null],
126
- default: 'hardware',
127
- },
128
- // 是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议）
129
- httpCache: {
130
- type: [Boolean, null],
131
- default: true,
132
- },
133
- // 播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景
134
- playStrategy: {
135
- type: [Number, null],
136
- default: 0,
137
- },
138
- // HTTP 请求 Header
139
- header: {
140
- type: [Object, null],
141
- default: () => ({}),
142
- },
143
- // 是否为直播源
144
- isLive: {
145
- type: [Boolean, null],
146
- default: false,
147
- },
148
- },
149
- };
1
+ export default {
2
+ props: {
3
+ // 视频的标题，全屏时在顶部展示
4
+ title: {
5
+ type: [String, null],
6
+ default: '',
7
+ },
8
+ // 是否视频高度跟随父容器
9
+ autoHeight: {
10
+ type: [Boolean, null],
11
+ default: false,
12
+ },
13
+ // 清晰度
14
+ resolution: {
15
+ type: [Array, null],
16
+ default: () => [],
17
+ },
18
+ // 要播放视频的资源地址
19
+ src: {
20
+ type: [String, null],
21
+ default: '',
22
+ },
23
+ // 是否自动播放
24
+ autoplay: {
25
+ type: [Boolean, null],
26
+ default: false,
27
+ },
28
+ // 是否循环播放
29
+ loop: {
30
+ type: [Boolean, null],
31
+ default: false,
32
+ },
33
+ // 是否静音播放
34
+ muted: {
35
+ type: [Boolean, null],
36
+ default: true,
37
+ },
38
+ // 指定视频初始播放位置，单位为秒（s）。
39
+ initialTime: {
40
+ type: [Number, null],
41
+ default: 0,
42
+ },
43
+ // 指定视频时长，单位为秒（s）。
44
+ duration: {
45
+ type: [Number, null],
46
+ default: 0,
47
+ },
48
+ // 在非全屏模式下，是否开启亮度与音量调节手势
49
+ pageGesture: {
50
+ type: [Boolean, null],
51
+ default: false,
52
+ },
53
+ // 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
54
+ direction: {
55
+ type: [Number, null],
56
+ default: 0,
57
+ },
58
+ // 是否显示全屏按钮
59
+ showFullscreenBtn: {
60
+ type: [Boolean, null],
61
+ default: true,
62
+ },
63
+ // 是否显示视频底部控制栏的播放按钮
64
+ showPlayBtn: {
65
+ type: [Boolean, null],
66
+ default: true,
67
+ },
68
+ // 是否开启控制进度的手势
69
+ enableProgressGesture: {
70
+ type: [Boolean, null],
71
+ default: true,
72
+ },
73
+ // 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
74
+ objectFit: {
75
+ type: [String, null],
76
+ default: 'contain',
77
+ },
78
+ // 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
79
+ poster: {
80
+ type: [String, null],
81
+ default: '',
82
+ },
83
+ // 移动网络提醒样式：0是不提醒，1是提醒，默认值为1
84
+ mobileNetHintType: {
85
+ type: [Number, null],
86
+ default: 1,
87
+ },
88
+ // 是否开启手势播放
89
+ enablePlayGesture: {
90
+ type: [Boolean, null],
91
+ default: false,
92
+ },
93
+ // 当跳转到其它小程序页面时，是否自动暂停本页面的视频
94
+ autoPauseIfNavigate: {
95
+ type: [Boolean, null],
96
+ default: true,
97
+ },
98
+ // 当跳转到其它微信原生页面时，是否自动暂停本页面的视频
99
+ autoPauseIfOpenNative: {
100
+ type: [Boolean, null],
101
+ default: true,
102
+ },
103
+ // 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
104
+ vslideGesture: {
105
+ type: [Boolean, null],
106
+ default: false,
107
+ },
108
+ // 在全屏模式下，是否开启亮度与音量调节手势
109
+ vslideGestureInFullscreen: {
110
+ type: [Boolean, null],
111
+ default: true,
112
+ },
113
+ // 视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html)
114
+ adUnitId: {
115
+ type: [String, null],
116
+ default: '',
117
+ },
118
+ // 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
119
+ posterForCrawler: {
120
+ type: [String, null],
121
+ default: '',
122
+ },
123
+ // 解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码；
124
+ codec: {
125
+ type: [String, null],
126
+ default: 'hardware',
127
+ },
128
+ // 是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议）
129
+ httpCache: {
130
+ type: [Boolean, null],
131
+ default: true,
132
+ },
133
+ // 播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景
134
+ playStrategy: {
135
+ type: [Number, null],
136
+ default: 0,
137
+ },
138
+ // HTTP 请求 Header
139
+ header: {
140
+ type: [Object, null],
141
+ default: () => ({}),
142
+ },
143
+ // 是否为直播源
144
+ isLive: {
145
+ type: [Boolean, null],
146
+ default: false,
147
+ },
148
+ },
149
+ };
package/components/ste-video/ste-video.vue CHANGED
@@ -88,14 +88,16 @@
88
88
  </view>
89
89
  <!-- 静音按钮 -->
90
90
  <view class="muted-box">
91
+ <!-- 非静音 -->
91
92
  <ste-icon
92
- code="&#xe6c3;"
93
+ code="&#xe6c2;"
93
94
  size="38"
94
95
  color="#ffffff"
95
96
  v-if="!isMuted"
96
97
  @click="triggerMuted"
97
98
  ></ste-icon>
98
- <ste-icon code="&#xe6c2;" size="38" color="#ffffff" v-else @click="triggerMuted"></ste-icon>
99
+ <!-- 静音 -->
100
+ <ste-icon code="&#xe6c3;" size="38" color="#ffffff" v-else @click="triggerMuted"></ste-icon>
99
101
  </view>
100
102
  <!-- 时间进度 -->
101
103
  <view class="time-box" v-if="isFull">
@@ -214,7 +216,7 @@ export default {
214
216
  resolutionIndex: 0,
215
217
  speedConfigArr: [0.5, 0.8, 1.0, 1.25, 1.5],
216
218
  showTip: false,
217
- msg: '你好',
219
+ msg: '',
218
220
  isMuted: this.muted,
219
221
  };
220
222
  },
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "stellar-ui-v2",
3
- "version": "1.36.0",
3
+ "version": "1.36.2",
4
4
  "description": "StellarUI组件库",
5
5
  "main": "stellar-ui/index.js",
6
6
  "private": false,
7
7
  "scripts": {},
8
8
  "repository": {
9
9
  "type": "git",
10
- "url": "https://github.com/wuhanshuzhiyun/StellarUI.git"
10
+ "url": "https://github.com/wuhanshuzhiyun/stellar-ui.git"
11
11
  },
12
12
  "keywords": [],
13
13
  "author": "",
14
- "license": "ISC",
14
+ "license": "MIT",
15
15
  "dependencies": {
16
16
  "g": "^2.0.1"
17
17
  }