stellar-ui-plus 1.24.23 → 1.24.25
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/components/ste-app-update/ATTRIBUTES.md +1 -0
- package/components/ste-media-preview/ATTRIBUTES.md +1 -0
- package/components/ste-media-preview/README.md +7 -0
- package/components/ste-media-preview/props.ts +1 -0
- package/components/ste-media-preview/ste-media-preview.easycom.json +6 -0
- package/components/ste-media-preview/ste-media-preview.vue +12 -2
- package/components/ste-upload/ATTRIBUTES.md +1 -0
- package/components/ste-upload/README.md +37 -0
- package/components/ste-upload/ste-upload.easycom.json +5 -0
- package/components/ste-upload/ste-upload.vue +5 -1
- package/package.json +1 -1
|
@@ -140,7 +140,7 @@ const onClick = () => {
|
|
|
140
140
|
};
|
|
141
141
|
</script>
|
|
142
142
|
<template>
|
|
143
|
-
<view class="ste-media-preview-root" data-test="media-preview" v-if="dataShow">
|
|
143
|
+
<view class="ste-media-preview-root" :style="{ zIndex }" data-test="media-preview" v-if="dataShow">
|
|
144
144
|
<view class="media-preview-content">
|
|
145
145
|
<template v-if="isScale">
|
|
146
146
|
<view
|
|
@@ -188,6 +188,9 @@ const onClick = () => {
|
|
|
188
188
|
</swiper-item>
|
|
189
189
|
</swiper>
|
|
190
190
|
</template>
|
|
191
|
+
<view class="media-preview-slot">
|
|
192
|
+
<slot></slot>
|
|
193
|
+
</view>
|
|
191
194
|
</view>
|
|
192
195
|
<view class="media-preview-footer">
|
|
193
196
|
<view class="footer-index">
|
|
@@ -210,7 +213,7 @@ const onClick = () => {
|
|
|
210
213
|
height: 100vh;
|
|
211
214
|
background-color: #000;
|
|
212
215
|
color: #fff;
|
|
213
|
-
z-index:
|
|
216
|
+
z-index: 997;
|
|
214
217
|
|
|
215
218
|
.media-preview-content {
|
|
216
219
|
width: 100%;
|
|
@@ -218,6 +221,7 @@ const onClick = () => {
|
|
|
218
221
|
display: flex;
|
|
219
222
|
align-items: center;
|
|
220
223
|
justify-content: center;
|
|
224
|
+
position: relative;
|
|
221
225
|
|
|
222
226
|
.preview-item {
|
|
223
227
|
width: 100%;
|
|
@@ -237,6 +241,12 @@ const onClick = () => {
|
|
|
237
241
|
max-height: 100%;
|
|
238
242
|
}
|
|
239
243
|
}
|
|
244
|
+
.media-preview-slot {
|
|
245
|
+
position: absolute;
|
|
246
|
+
bottom: 30rpx;
|
|
247
|
+
left: 50%;
|
|
248
|
+
transform: translateX(-50%);
|
|
249
|
+
}
|
|
240
250
|
}
|
|
241
251
|
|
|
242
252
|
.media-preview-footer {
|
|
@@ -32,5 +32,6 @@
|
|
|
32
32
|
| `beforeDelete` | 文件删除前触发 | `index`：正在删除的文件下标<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
|
|
33
33
|
| `delete` | 文件删除后触发 | `index`：删除的文件下标<br/>`fileList`：删除后的文件列表 | - |
|
|
34
34
|
| `open-preview` | 打开预览时触发 | - | - |
|
|
35
|
+
| `preview-change` | 预览图片变化触发 | - | - |
|
|
35
36
|
| `close-preview` | 关闭预览时触发 | - | - |
|
|
36
37
|
| `click-item` | 点击文件触发 | `index`：文件下标 | - |
|
|
@@ -214,11 +214,48 @@
|
|
|
214
214
|
</script>
|
|
215
215
|
```
|
|
216
216
|
|
|
217
|
+
#### 媒体预览插槽
|
|
218
|
+
|
|
219
|
+
- 事件`previewChange`监听媒体预览区域切换，参数为当前预览的索引或者`null`；
|
|
220
|
+
- 插槽`media-preview`可自定义媒体预览区域底部内容
|
|
221
|
+
|
|
222
|
+
```html
|
|
223
|
+
<ste-upload v-model="fileList2" uploadIcon="" @preview-change="previewChange">
|
|
224
|
+
<template v-slot:media-preview>
|
|
225
|
+
<button>自定义</button>
|
|
226
|
+
</template>
|
|
227
|
+
</ste-upload>
|
|
228
|
+
<script lang="ts" setup>
|
|
229
|
+
import { ref, watch } from 'vue';
|
|
230
|
+
const fileList2 = ref([]);
|
|
231
|
+
|
|
232
|
+
watch(fileList2, fileList => {
|
|
233
|
+
setTimeout(() => {
|
|
234
|
+
fileList.forEach(item => {
|
|
235
|
+
item.status = 'success';
|
|
236
|
+
});
|
|
237
|
+
}, 1000);
|
|
238
|
+
});
|
|
239
|
+
const previewChange = (index: number | null) => {
|
|
240
|
+
console.log('previewChange', index);
|
|
241
|
+
};
|
|
242
|
+
</script>
|
|
243
|
+
```
|
|
244
|
+
|
|
217
245
|
---$
|
|
218
246
|
|
|
219
247
|
### API
|
|
220
248
|
|
|
221
249
|
<!-- props -->
|
|
222
250
|
|
|
251
|
+
#### 组件插槽(Slots)
|
|
252
|
+
|
|
253
|
+
| 插槽名 | 说明 | 插槽参数 | 支持版本 |
|
|
254
|
+
| ------- | ------------ | -------- | -------- |
|
|
255
|
+
| default | 上传按钮 | - | - |
|
|
256
|
+
| preview-cover | 每一份文件的预览图层样式 | 当前文件 | - |
|
|
257
|
+
| media-preview | 图片放大预览（媒体预览组件带默认插槽） | - | - |
|
|
258
|
+
|
|
259
|
+
|
|
223
260
|
---$
|
|
224
261
|
{{xuyajun}}
|
|
@@ -258,6 +258,11 @@
|
|
|
258
258
|
"description": "打开预览时触发",
|
|
259
259
|
"type": "()=>void"
|
|
260
260
|
},
|
|
261
|
+
{
|
|
262
|
+
"name": "[event]preview-change",
|
|
263
|
+
"description": "预览图片变化触发",
|
|
264
|
+
"type": "(index:number | null)=>void"
|
|
265
|
+
},
|
|
261
266
|
{
|
|
262
267
|
"name": "[event]close-preview",
|
|
263
268
|
"description": "关闭预览时触发",
|
|
@@ -17,6 +17,7 @@ const emits = defineEmits<{
|
|
|
17
17
|
(e: 'read', list: UploadFileType[]): void;
|
|
18
18
|
(e: 'beforeDelete', index: number, suspend: () => void, next: () => void, stop: () => void): void;
|
|
19
19
|
(e: 'delete', index: number, list: UploadFileType[]): void;
|
|
20
|
+
(e: 'preview-change', index: number | null): void;
|
|
20
21
|
(e: 'open-preview'): void;
|
|
21
22
|
(e: 'close-preview'): void;
|
|
22
23
|
(e: 'click-item', i: number): void;
|
|
@@ -83,6 +84,7 @@ watch(
|
|
|
83
84
|
} else {
|
|
84
85
|
emits('open-preview');
|
|
85
86
|
}
|
|
87
|
+
emits('preview-change', val);
|
|
86
88
|
}
|
|
87
89
|
);
|
|
88
90
|
|
|
@@ -264,7 +266,9 @@ const onMediaType = () => {
|
|
|
264
266
|
</slot>
|
|
265
267
|
</view>
|
|
266
268
|
</view>
|
|
267
|
-
<ste-media-preview :show="Boolean(previewIndex || previewIndex === 0)" :urls="cmpPreviewList" v-model:index="previewIndex" @close="setPreviewIndex(null)"
|
|
269
|
+
<ste-media-preview :show="Boolean(previewIndex || previewIndex === 0)" :urls="cmpPreviewList" v-model:index="previewIndex" @close="setPreviewIndex(null)">
|
|
270
|
+
<slot name="media-preview"></slot>
|
|
271
|
+
</ste-media-preview>
|
|
268
272
|
</view>
|
|
269
273
|
</template>
|
|
270
274
|
<style lang="scss" scoped>
|