From b0359c4e17a4d36f5446742e753712530865de5d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 3 Nov 2022 15:26:18 +0800
Subject: [PATCH] fix: some vue warn in browser dev console (#679)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

修复一些因使用不当导致的 Vue warn。

#### Screenshots:

<img width="832" alt="image" src="https://user-images.githubusercontent.com/21301288/199663758-e29f48c4-0c33-4c78-913f-2364ce4b5fbe.png">

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../components/AttachmentDetailModal.vue      | 25 +++++++++++--------
 .../CoreSelectorProvider.vue                  |  2 +-
 .../UploadSelectorProvider.vue                |  2 +-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index ec828459..7b3fb685 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -100,20 +100,23 @@ const onVisibleChange = (visible: boolean) => {
         >
           <dt class="text-sm font-medium text-gray-900">预览</dt>
           <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            <LazyImage
+            <div
               v-if="isImage(attachment?.spec.mediaType)"
-              :alt="attachment?.spec.displayName"
-              :src="attachment?.status?.permalink"
-              class="max-w-full cursor-pointer rounded sm:max-w-[50%]"
               @click="onlyPreview = !onlyPreview"
             >
-              <template #loading>
-                <span class="text-gray-400">加载中...</span>
-              </template>
-              <template #error>
-                <span class="text-red-400">加载异常</span>
-              </template>
-            </LazyImage>
+              <LazyImage
+                :alt="attachment?.spec.displayName"
+                :src="attachment?.status?.permalink"
+                classes="max-w-full cursor-pointer rounded sm:max-w-[50%]"
+              >
+                <template #loading>
+                  <span class="text-gray-400">加载中...</span>
+                </template>
+                <template #error>
+                  <span class="text-red-400">加载异常</span>
+                </template>
+              </LazyImage>
+            </div>
             <span v-else> 此文件不支持预览 </span>
           </dd>
         </div>
diff --git a/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue b/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
index e65e6ac6..339e74c2 100644
--- a/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
+++ b/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@@ -118,7 +118,7 @@ await handleFetchAttachments();
             :key="attachment.metadata.name"
             :alt="attachment.spec.displayName"
             :src="attachment.status?.permalink"
-            class="pointer-events-none object-cover group-hover:opacity-75"
+            classes="pointer-events-none object-cover group-hover:opacity-75"
           >
             <template #loading>
               <div class="flex h-full items-center justify-center object-cover">
diff --git a/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue b/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
index 148611df..0562dfd8 100644
--- a/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
+++ b/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
@@ -177,7 +177,7 @@ watchEffect(() => {
                 :key="attachment.metadata.name"
                 :alt="attachment.spec.displayName"
                 :src="attachment.status?.permalink"
-                class="pointer-events-none object-cover group-hover:opacity-75"
+                classes="pointer-events-none object-cover group-hover:opacity-75"
               >
                 <template #loading>
                   <div