From 9f4e449a4159c9debf5520a797393bd5df2e5908 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期一, 18 七月 2022 15:01:46 +0800
Subject: [PATCH] css
---
src/components/updata/updata.vue | 156 +++++++++++++++++++++++++--------------------------
1 files changed, 76 insertions(+), 80 deletions(-)
diff --git a/src/components/updata/updata.vue b/src/components/updata/updata.vue
index c88ee0c..5031621 100644
--- a/src/components/updata/updata.vue
+++ b/src/components/updata/updata.vue
@@ -1,92 +1,88 @@
<template>
- <el-dialog
- v-model="dialogVisible"
- title="导入Excel"
- width="50%"
- draggable
- >
- <el-upload
- v-model:file-list="fileList"
- class="upload-demo"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
- multiple
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :before-remove="beforeRemove"
- :limit="3"
- :on-exceed="handleExceed"
- >
- <el-button>下载模板</el-button>
- <el-button type="primary">点击上传</el-button>
- <template #tip>
- <div class="el-upload__tip">
- 只允许导入“xls”或“xlsx”格式文件！
- </div>
- </template>
- </el-upload>
- </el-dialog>
+ <el-dialog v-model="dialogVisible" title="导入Excel" width="50%" :fullscreen="full" draggable>
+ <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ multiple
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :limit="3"
+ :on-exceed="handleExceed"
+ >
+ <el-button>下载模板</el-button>
+ <el-button type="primary">点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
+ </template>
+ </el-upload>
+ </el-dialog>
</template>
<script lang="ts">
-import { ref,toRefs, reactive,defineComponent,computed } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import type { UploadProps, UploadUserFile } from "element-plus";
+import { ref, toRefs, reactive, defineComponent, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import type { UploadProps, UploadUserFile } from 'element-plus';
+import { FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
- setup() {
- let dialogVisible =ref<boolean>(false)
- const fileList = ref<UploadUserFile[]>([
- {
- name: "element-plus-logo.svg",
- url: "https://element-plus.org/images/element-plus-logo.svg",
- },
- {
- name: "element-plus-logo2.svg",
- url: "https://element-plus.org/images/element-plus-logo.svg",
- },
- ]);
+ setup() {
+ let dialogVisible = ref<boolean>(false);
+ const fileList = ref<UploadUserFile[]>([
+ {
+ name: 'element-plus-logo.svg',
+ url: 'https://element-plus.org/images/element-plus-logo.svg',
+ },
+ {
+ name: 'element-plus-logo2.svg',
+ url: 'https://element-plus.org/images/element-plus-logo.svg',
+ },
+ ]);
- const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
- console.log(file, uploadFiles);
- };
+ const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
+ console.log(file, uploadFiles);
+ };
- const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
- console.log(uploadFile);
- };
+ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+ console.log(uploadFile);
+ };
- const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
- ElMessage.warning(
- `The limit is 3, you selected ${
- files.length
- } files this time, add up to ${
- files.length + uploadFiles.length
- } totally`
- );
- };
+ const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
+ ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
+ };
- const beforeRemove: UploadProps["beforeRemove"] = (
- uploadFile,
- uploadFiles
- ) => {
- return ElMessageBox.confirm(
- `Cancel the transfert of ${uploadFile.name} ?`
- ).then(
- () => true,
- () => false
- );
- };
- // 打开弹窗
- const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
- dialogVisible.value=true
+ const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
+ return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
+ () => true,
+ () => false
+ );
+ };
+ // 打开弹窗
+ const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
+ dialogVisible.value = true;
+ };
+ //全屏
+ const full = ref(false);
+ const toggleFullscreen = () => {
+ if (full.value == false) {
+ full.value = true;
+ }else{
+ full.value = false;
}
- return {
- dialogVisible,
- fileList,
- handleRemove,
- handlePreview,
- handleExceed,
- beforeRemove,
- openDialog
- };
- },
+ };
+ return {
+ dialogVisible,
+ fileList,
+ handleRemove,
+ handlePreview,
+ handleExceed,
+ beforeRemove,
+ openDialog,
+ full,
+ toggleFullscreen,
+ FullScreen
+ };
+ },
});
</script>
<style scoped>
--
Gitblit v1.9.2