127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
Vue
<!--<script setup lang="ts">-->
|
|
<!--import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';-->
|
|
|
|
<!--import { ref } from 'vue';-->
|
|
<!--import { Attachments } from 'vue-element-plus-x';-->
|
|
|
|
<!--import { ElMessage } from 'element-plus';-->
|
|
|
|
<!--const senderRef = ref();-->
|
|
<!--const showHeaderFlog = ref(false);-->
|
|
|
|
<!--type SelfFilesCardProps = FilesCardProps & {-->
|
|
<!-- id?: number | string;-->
|
|
<!--};-->
|
|
|
|
<!--const files = ref<SelfFilesCardProps[]>([]);-->
|
|
<!--defineExpose( {-->
|
|
<!-- init(firstFile: File) {-->
|
|
<!-- console.log('firstFile', firstFile);-->
|
|
<!-- showHeaderFlog.value = true;-->
|
|
<!-- files.value = [-->
|
|
<!-- {-->
|
|
<!-- id: 0,-->
|
|
<!-- uid: `${firstFile.name}_${firstFile.size}`,-->
|
|
<!-- name: firstFile.name,-->
|
|
<!-- fileSize: firstFile.size,-->
|
|
<!-- imgFile: firstFile,-->
|
|
<!-- showDelIcon: true,-->
|
|
<!-- imgVariant: 'square',-->
|
|
<!-- },-->
|
|
<!-- ];-->
|
|
<!-- },-->
|
|
<!--});-->
|
|
|
|
<!--function closeHeader() {-->
|
|
<!-- showHeaderFlog.value = false;-->
|
|
<!-- senderRef.value.closeHeader();-->
|
|
<!--}-->
|
|
|
|
<!--function handlePasteFile(firstFile: File, fileList: FileList) {-->
|
|
<!-- showHeaderFlog.value = true;-->
|
|
<!-- senderRef.value.openHeader();-->
|
|
<!-- const fileArray = [...fileList];-->
|
|
|
|
<!-- fileArray.forEach((file, index) => {-->
|
|
<!-- files.value.push({-->
|
|
<!-- id: index,-->
|
|
<!-- uid: `${index}_${file.name}_${file.size}`,-->
|
|
<!-- name: file.name,-->
|
|
<!-- fileSize: file.size,-->
|
|
<!-- imgFile: file,-->
|
|
<!-- showDelIcon: true,-->
|
|
<!-- imgVariant: 'square',-->
|
|
<!-- });-->
|
|
<!-- });-->
|
|
<!--}-->
|
|
|
|
<!--async function handleHttpRequest(options: any) {-->
|
|
<!-- const formData = new FormData();-->
|
|
<!-- formData.append('file', options.file);-->
|
|
<!-- ElMessage.info('上传中...');-->
|
|
|
|
<!-- setTimeout(() => {-->
|
|
<!-- const res = {-->
|
|
<!-- message: '文件上传成功',-->
|
|
<!-- fileName: options.file.name,-->
|
|
<!-- uid: options.file.uid,-->
|
|
<!-- fileSize: options.file.size,-->
|
|
<!-- imgFile: options.file,-->
|
|
<!-- };-->
|
|
<!-- files.value.push({-->
|
|
<!-- id: files.value.length,-->
|
|
<!-- uid: res.uid,-->
|
|
<!-- name: res.fileName,-->
|
|
<!-- fileSize: res.fileSize,-->
|
|
<!-- imgFile: res.imgFile,-->
|
|
<!-- showDelIcon: true,-->
|
|
<!-- imgVariant: 'square',-->
|
|
<!-- });-->
|
|
|
|
<!-- ElMessage.success('上传成功');-->
|
|
<!-- }, 1000);-->
|
|
<!--}-->
|
|
|
|
<!--function handleDeleteCard(item: SelfFilesCardProps) {-->
|
|
<!-- files.value = files.value.filter((items: any) => items.id !== item.id);-->
|
|
<!-- ElMessage.success('删除成功');-->
|
|
<!--}-->
|
|
<!--</script>-->
|
|
|
|
<!--<template>-->
|
|
<!-- <div class="header-self-wrap">-->
|
|
<!-- <Attachments-->
|
|
<!-- :items="files"-->
|
|
<!-- :http-request="handleHttpRequest"-->
|
|
<!-- @delete-card="handleDeleteCard"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
<!--</template>-->
|
|
|
|
<!--<style scoped>-->
|
|
<!--.header-self-wrap {-->
|
|
<!-- display: flex;-->
|
|
<!-- flex-direction: row;-->
|
|
<!-- padding: 16px;-->
|
|
<!-- width: 100%;-->
|
|
<!-- overflow: auto;-->
|
|
<!-- .header-self-title {-->
|
|
<!-- width: 100%;-->
|
|
<!-- display: flex;-->
|
|
<!-- height: 30px;-->
|
|
<!-- align-items: center;-->
|
|
<!-- justify-content: space-between;-->
|
|
<!-- padding-bottom: 8px;-->
|
|
<!-- }-->
|
|
<!-- .header-self-content {-->
|
|
<!-- flex: 1;-->
|
|
<!-- display: flex;-->
|
|
<!-- align-items: center;-->
|
|
<!-- justify-content: center;-->
|
|
<!-- font-size: 20px;-->
|
|
<!-- color: #626aef;-->
|
|
<!-- font-weight: 600;-->
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</style>-->
|