初始化仓库

2026-04-14 16:54:04 +08:00
commit 967c25b397
553 changed files with 106514 additions and 0 deletions
--- a/components/uploader/uploader.vue
+++ b/components/uploader/uploader.vue
@ -0,0 +1,143 @@
+<template>
+    <view class="uploader-container flex wrap">
+        <view class="upload-image-box" v-for="(item, index) in fileList" :key="index" :style="{width: previewSize, height: previewSize}">
+            <u-image mode="aspectFit" class="img-preview" border-radius="10rpx" :src="item.url" :width="previewSize" :height="previewSize" />
+            <view class="close-icon flex row-center" @click="deleteImage($event, index)">
+                <u-icon name="close" size="30" color="white" />
+            </view>
+        </view>
+        <view 
+            class="uplader-upload flex row-center"
+            :style="{width: previewSize, height: previewSize}"
+            @click="handleImage"
+            v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
+            v-if="!useSlot"
+        >
+            <u-icon size="48" color="#dcdee0" name="camera" />
+            <view type="image" accept="image/*" class="uploader-input" />
+        </view>
+        <view
+        class="uplader-upload-slot flex row-center"
+        @click="handleImage"
+		:style="{width: previewSize, height: previewSize}"
+        v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
+        v-else
+        >
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: "uploader",
+        props: {
+            fileList: {
+                type: Array,
+                default: () => []
+            },
+            // 默认不允许多选图片
+            mutiple: {
+                type: Boolean,
+                default: false
+            },
+            // 限制上传文件数量
+            maxUpload: {
+                type: Number,
+                default: 1
+            },
+            previewSize: {
+                type: String,
+                default: "160rpx"
+            },
+            // 是否可删除
+            deletable: {
+                type: Boolean,
+                default: false,
+            },
+            useSlot: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                
+            }
+        },
+        create() {
+            
+        },
+        methods: {
+            handleImage() {
+                uni.chooseImage({
+                    count: this.mutiple ? this.maxUpload : 1,
+                    success: (res) => {
+                        this.$emit("after-read", res.tempFiles)
+                    }
+                })
+            },
+            deleteImage(e, index) {
+                this.$emit('delete', index)
+            }
+        }
+    }
+    
+    
+</script>
+
+<style lang="scss">
+    .uploader-container {
+        .upload-image-box {
+            position: relative;
+            margin-right: 8rpx;
+            margin-bottom: 8rpx;
+            .img-preview {
+                
+            }
+            .close-icon {
+                position: absolute;
+                right: -20rpx;
+                top: -15rpx;
+                width: 40rpx;
+                height: 40rpx;
+                background-color: red;
+                border-radius: 50%;
+                z-index: 20;
+            }
+        }
+        .uplader-upload {
+            position: relative;
+            width: 160rpx;
+            height: 160rpx;
+            border: 1px dashed $-color-border;
+            .uploader-input {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                opacity: 0;
+                top: 0;
+                left: 0;
+                z-index: 10;
+                cursor: pointer;
+            }
+        }
+        .uplader-upload-slot {
+            position: relative;
+            min-width: 160rpx;
+            min-height: 160rpx;
+            .uploader-input {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                opacity: 0;
+                top: 0;
+                left: 0;
+                z-index: 10;
+                cursor: pointer;
+            }
+        }
+    }
+</style>