<template>
|
<div class="demo-upload scroller1">
|
<div class="demo-upload__item">
|
<p>文件空间</p>
|
<cl-upload-space v-model="urls" />
|
|
<p style="margin-top: 10px">选择的文件：</p>
|
|
<el-image
|
v-for="(item, index) in urlList"
|
:key="index"
|
:src="item"
|
:style="{ width: '100px', marginRight: '10px' }"
|
/>
|
</div>
|
|
<div class="demo-upload__item">
|
<p>普通上传</p>
|
<cl-upload />
|
</div>
|
|
<div class="demo-upload__item">
|
<p>指定类型上传 accept=.jpg,.png</p>
|
<cl-upload accept=".jpg,.png" />
|
</div>
|
|
<div class="demo-upload__item">
|
<p>多图上传 picture-card</p>
|
|
<cl-upload multiple :limit="3" list-type="picture-card" />
|
</div>
|
|
<div class="demo-upload__item">
|
<p>文件上传 text</p>
|
<cl-upload v-model="urls" multiple :limit="5" accept="*" list-type="text" />
|
</div>
|
|
<div class="demo-upload__item">
|
<p>自定义</p>
|
<cl-upload icon="el-icon-picture" text="选择图片" :size="[120, 200]" />
|
</div>
|
|
<div class="demo-upload__item">
|
<p>拖拽上传</p>
|
<cl-upload drag>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</cl-upload>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { computed, ref } from "vue";
|
|
export default {
|
name: "upload",
|
|
setup() {
|
const urls = ref<string>("");
|
const urlList = computed(() => urls.value.split(",").filter(Boolean));
|
|
return { urls, urlList };
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.demo-upload {
|
.demo-upload__item {
|
margin-bottom: 10px;
|
background-color: #fff;
|
padding: 10px;
|
|
& > p {
|
margin-bottom: 10px;
|
font-size: 14px;
|
}
|
}
|
}
|
</style>
|
