61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import ADDICON from "../static/icons/add.png";
|
||
|
|
import {uploadFile} from "../utils/uils";
|
||
|
|
import XImage from "./XImage.vue";
|
||
|
|
|
||
|
|
const {size} = defineProps({
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: "160rpx"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const emits = defineEmits(['success']);
|
||
|
|
const files = defineModel('files');
|
||
|
|
|
||
|
|
const upload = async () => {
|
||
|
|
uploadFile({
|
||
|
|
count: 1,
|
||
|
|
}).then(({data}) => {
|
||
|
|
files.value.push(data);
|
||
|
|
emits('success', data);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="!flex gap-[12rpx] flex-wrap">
|
||
|
|
<view class="x-upload" @click="upload">
|
||
|
|
<image class="!size-[28rpx]" :src="ADDICON"></image>
|
||
|
|
<view>上传图片</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<x-image
|
||
|
|
:style="{
|
||
|
|
width: size,
|
||
|
|
height: size,
|
||
|
|
}"
|
||
|
|
class="border border-[rgb(229,230,235)]"
|
||
|
|
v-for="v in files"
|
||
|
|
:src="v"
|
||
|
|
:list="[v]"
|
||
|
|
:key="v">
|
||
|
|
</x-image>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.x-upload {
|
||
|
|
border: 1px dashed rgb(229, 230, 235);
|
||
|
|
background-color: #F2F3F5;
|
||
|
|
width: v-bind(size);
|
||
|
|
height: v-bind(size);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 22rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|