From 6e7acd5062824d5aae2ed345898d761a93879de0 Mon Sep 17 00:00:00 2001
From: heimawl <1785969728@qq.com>
Date: 星期五, 02 六月 2023 17:16:31 +0800
Subject: [PATCH] 组件库整理，依赖安装、excel导入导入方法整理
---
src/components/ImageUpload/index.vue | 61 +++++++++++++++++-------------
1 files changed, 34 insertions(+), 27 deletions(-)
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index b57a15e..f70e1fc 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -1,3 +1,4 @@
+<!-- 涓婁紶鏂囦欢灏佽 -->
<template>
<div class="component-upload-image">
<el-upload
@@ -15,16 +16,20 @@
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
- :class="{hide: this.fileList.length >= this.limit}"
+ :class="{ hide: this.fileList.length >= this.limit }"
>
<i class="el-icon-plus"></i>
</el-upload>
-
+
<!-- 涓婁紶鎻愮ず -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
璇蜂笂浼�
- <template v-if="fileSize"> 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
- <template v-if="fileType"> 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+ <template v-if="fileSize">
+ 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b>
+ </template>
+ <template v-if="fileType">
+ 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+ </template>
鐨勬枃浠�
</div>
@@ -55,7 +60,7 @@
},
// 澶у皬闄愬埗(MB)
fileSize: {
- type: Number,
+ type: Number,
default: 5,
},
// 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
@@ -66,8 +71,8 @@
// 鏄惁鏄剧ず鎻愮ず
isShowTip: {
type: Boolean,
- default: true
- }
+ default: true,
+ },
},
data() {
return {
@@ -81,7 +86,7 @@
headers: {
Authorization: "Bearer " + getToken(),
},
- fileList: []
+ fileList: [],
};
},
watch: {
@@ -89,14 +94,14 @@
handler(val) {
if (val) {
// 棣栧厛灏嗗�艰浆涓烘暟缁�
- const list = Array.isArray(val) ? val : this.value.split(',');
+ const list = Array.isArray(val) ? val : this.value.split(",");
// 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
- this.fileList = list.map(item => {
+ this.fileList = list.map((item) => {
if (typeof item === "string") {
if (item.indexOf(this.baseUrl) === -1) {
- item = { name: this.baseUrl + item, url: this.baseUrl + item };
+ item = { name: this.baseUrl + item, url: this.baseUrl + item };
} else {
- item = { name: item, url: item };
+ item = { name: item, url: item };
}
}
return item;
@@ -107,8 +112,8 @@
}
},
deep: true,
- immediate: true
- }
+ immediate: true,
+ },
},
computed: {
// 鏄惁鏄剧ず鎻愮ず
@@ -125,7 +130,7 @@
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
- isImg = this.fileType.some(type => {
+ isImg = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
@@ -135,7 +140,9 @@
}
if (!isImg) {
- this.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!`);
+ this.$modal.msgError(
+ `鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!`
+ );
return false;
}
if (this.fileSize) {
@@ -167,8 +174,8 @@
},
// 鍒犻櫎鍥剧墖
handleDelete(file) {
- const findex = this.fileList.map(f => f.name).indexOf(file.name);
- if(findex > -1) {
+ const findex = this.fileList.map((f) => f.name).indexOf(file.name);
+ if (findex > -1) {
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
}
@@ -202,25 +209,25 @@
strs += list[i].url.replace(this.baseUrl, "") + separator;
}
}
- return strs != '' ? strs.substr(0, strs.length - 1) : '';
- }
- }
+ return strs != "" ? strs.substr(0, strs.length - 1) : "";
+ },
+ },
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 鎺у埗鍔犲彿閮ㄥ垎
::v-deep.hide .el-upload--picture-card {
- display: none;
+ display: none;
}
// 鍘绘帀鍔ㄧ敾鏁堟灉
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
- transition: all 0s;
+ transition: all 0s;
}
-::v-deep .el-list-enter, .el-list-leave-active {
- opacity: 0;
- transform: translateY(0);
+::v-deep .el-list-enter,
+.el-list-leave-active {
+ opacity: 0;
+ transform: translateY(0);
}
</style>
-
--
Gitblit v1.9.3