From 4ca1cf45640f7802ff9bb649f223b27667d4bda3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Fri, 8 Dec 2023 13:24:19 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E6=98=BE=E7=A4=BA&=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageUpload/index.vue | 30 ++++++++++++++++++++++++----
 src/views/system/article/publish.vue | 14 +++++++++++--
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 0d4c18c..1a757ba 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -17,8 +17,11 @@
       :headers="headers"
       v-model:file-list="fileList"
       :on-preview="handlePictureCardPreview"
+      :style="cssVars"
       :class="{ hide: fileList.length >= limit }">
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+      <slot name="icon">
+        <el-icon class="avatar-uploader-icon"><uploadFilled /></el-icon>
+      </slot>
 
       <template v-slot:tip>
         <div class="el-upload__tip" v-if="showTip">
@@ -63,7 +66,7 @@ const props = defineProps({
   // 图片数量限制
   limit: {
     type: Number,
-    default: 5
+    default: 1
   },
   // 大小限制(MB)
   fileSize: {
@@ -73,7 +76,7 @@ const props = defineProps({
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ['png', 'jpg', 'jpeg']
+    default: () => ['png', 'jpg', 'jpeg', 'webp']
   },
   // 是否显示提示
   isShowTip: {
@@ -83,6 +86,12 @@ const props = defineProps({
   // 上传携带的参数
   data: {
     type: Object
+  },
+  style: {
+    type: Object,
+    default: {
+      width: '120px'
+    }
   }
 })
 
@@ -98,7 +107,12 @@ const headers = ref({ Authorization: 'Bearer ' + getToken() })
 const fileList = ref([])
 const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
 const uploadData = computed(() => props.data)
-
+const cssVars = computed(() => {
+  return {
+    '--el-upload-picture-card-size': props.style.width,
+    '--el-upload-list-picture-card-size': props.style.width
+  }
+})
 watch(
   () => props.modelValue,
   (val) => {
@@ -206,3 +220,11 @@ function copySuccess() {
   proxy.$modal.msgSuccess('复制成功')
 }
 </script>
+<style>
+.el-upload--picture-card {
+  --el-upload-picture-card-size: unset;
+}
+.el-upload-list--picture-card {
+  --el-upload-list-picture-card-size: unset;
+}
+</style>
diff --git a/src/views/system/article/publish.vue b/src/views/system/article/publish.vue
index d6ef2e3..bcea9c1 100644
--- a/src/views/system/article/publish.vue
+++ b/src/views/system/article/publish.vue
@@ -33,14 +33,24 @@
               <el-tag v-for="tag in form.dynamicTags" :key="tag" class="mr10" closable :disable-transitions="false" @close="handleCloseTag(tag)">
                 {{ tag }}
               </el-tag>
-              <el-input v-if="inputVisible" ref="inputRef" v-model="inputValue" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+              <el-input
+                v-if="inputVisible"
+                style="width: 100px"
+                ref="inputRef"
+                v-model="inputValue"
+                @keyup.enter="handleInputConfirm"
+                @blur="handleInputConfirm" />
 
               <el-button v-else class="button-new-tag" size="small" icon="plus" text @click="showInput">文章标签</el-button>
             </el-form-item>
           </el-col>
 
           <el-form-item label="文章封面">
-            <UploadImage ref="uploadRef" v-model="form.coverUrl" :limit="1" :fileSize="15" :drag="true" />
+            <UploadImage ref="uploadRef" v-model="form.coverUrl" :limit="1" :fileSize="15">
+              <template #icon>
+                <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+              </template>
+            </UploadImage>
           </el-form-item>
           <el-form-item prop="content" label="文章内容">
             <MdEditor v-model="form.content" :onUploadImg="onUploadImg" />
-- 
Gitee