stellar-ui-plus 1.24.23 → 1.24.24
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.
|
@@ -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 {
|
|
@@ -214,6 +214,34 @@
|
|
|
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
|
|
@@ -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>
|