stellar-ui-plus 1.24.22 → 1.24.24

package/components/ste-app-update/ATTRIBUTES.md

@@ -7,6 +7,7 @@
 | `appType` | APP环境,版本号的最后一位为环境标识 | `string` | `` | - | - |
 | `btnText` | 立即体验按钮文本 | `string` | `立即体验` | - | - |
 | `appVersion` | 当前应用版本 | `string` | `` | - | `1.24.6` |
+| `zIndex` | 弹窗层级 | `string/number` | `998` | - | `1.24.23` |
 
 
 #### Events

package/components/ste-app-update/props.ts

@@ -6,6 +6,7 @@ export interface AppUpdateProps {
     appType: string;
     btnText: string;
     appVersion: string;
+    zIndex: number;
 }
 
 export default {
@@ -58,5 +59,12 @@ export default {
         validator: (value: string) => {
             return typeof value === 'string';
         }
+    },
+    zIndex: {
+        type: [Number, String],
+        default: () => 998,
+        validator: (value: any) => {
+            return typeof value === 'number' || typeof value === 'string'
+        }
     }
 } satisfies Record<keyof AppUpdateProps, any>;

package/components/ste-app-update/ste-app-update.easycom.json

@@ -41,6 +41,13 @@
             "default": "",
             "version": "1.24.6"
         },
+        {
+            "name": "zIndex",
+            "description": "弹窗层级",
+            "type": "string/number",
+            "default": "998",
+            "version": "1.24.23"
+        },
         {
             "name": "[event]cancel",
             "description": "取消更新",

package/components/ste-app-update/ste-app-update.vue

@@ -345,7 +345,7 @@ defineExpose({
 </script>
 
 <template>
-    <view class="update-mask flex-center" v-if="open">
+    <view class="update-mask flex-center" :style="{ zIndex }" v-if="open">
         <view class="update-content">
             <image class="update-image" src="../../static/app_update_img.png"></image>
 
@@ -408,7 +408,7 @@ defineExpose({
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9999;
+    z-index: 998;
 
     .update-content {
         width: 694rpx;

package/components/ste-media-preview/ste-media-preview.vue

@@ -188,6 +188,9 @@ const onClick = () => {
                     </swiper-item>
                 </swiper>
             </template>
+            <view class="media-preview-slot">
+                <slot></slot>
+            </view>
         </view>
         <view class="media-preview-footer">
             <view class="footer-index">
@@ -210,7 +213,7 @@ const onClick = () => {
     height: 100vh;
     background-color: #000;
     color: #fff;
-    z-index: 9999999;
+    z-index: 997;
 
     .media-preview-content {
         width: 100%;
@@ -218,6 +221,7 @@ const onClick = () => {
         display: flex;
         align-items: center;
         justify-content: center;
+        position: relative;
 
         .preview-item {
             width: 100%;
@@ -237,6 +241,12 @@ const onClick = () => {
                 max-height: 100%;
             }
         }
+        .media-preview-slot {
+            position: absolute;
+            bottom: 30rpx;
+            left: 50%;
+            transform: translateX(-50%);
+        }
     }
 
     .media-preview-footer {

package/components/ste-upload/README.md

@@ -214,6 +214,34 @@
 </script>
 ```
 
+#### 媒体预览插槽
+
+- 事件`previewChange`监听媒体预览区域切换，参数为当前预览的索引或者`null`；
+- 插槽`media-preview`可自定义媒体预览区域底部内容
+
+```html
+<ste-upload v-model="fileList2" uploadIcon="&#xe67e;" @preview-change="previewChange">
+    <template v-slot:media-preview>
+        <button>自定义</button>
+    </template>
+</ste-upload>
+<script lang="ts" setup>
+    import { ref, watch } from 'vue';
+    const fileList2 = ref([]);
+
+    watch(fileList2, fileList => {
+        setTimeout(() => {
+            fileList.forEach(item => {
+                item.status = 'success';
+            });
+        }, 1000);
+    });
+    const previewChange = (index: number | null) => {
+        console.log('previewChange', index);
+    };
+</script>
+```
+
 ---$
 
 ### API

package/components/ste-upload/ste-upload.vue

@@ -17,6 +17,7 @@ const emits = defineEmits<{
     (e: 'read', list: UploadFileType[]): void;
     (e: 'beforeDelete', index: number, suspend: () => void, next: () => void, stop: () => void): void;
     (e: 'delete', index: number, list: UploadFileType[]): void;
+    (e: 'preview-change', index: number | null): void;
     (e: 'open-preview'): void;
     (e: 'close-preview'): void;
     (e: 'click-item', i: number): void;
@@ -83,6 +84,7 @@ watch(
         } else {
             emits('open-preview');
         }
+        emits('preview-change', val);
     }
 );
 
@@ -264,7 +266,9 @@ const onMediaType = () => {
                 </slot>
             </view>
         </view>
-        <ste-media-preview :show="Boolean(previewIndex || previewIndex === 0)" :urls="cmpPreviewList" v-model:index="previewIndex" @close="setPreviewIndex(null)" />
+        <ste-media-preview :show="Boolean(previewIndex || previewIndex === 0)" :urls="cmpPreviewList" v-model:index="previewIndex" @close="setPreviewIndex(null)">
+            <slot name="media-preview"></slot>
+        </ste-media-preview>
     </view>
 </template>
 <style lang="scss" scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.24.22",
+    "version": "1.24.24",
     "description": "",
     "author": "",
     "license": "MIT",