[coc-card] fix upload avatar

masquevil · Feb 25, 2024 · 0eeb2a0 · 0eeb2a0
1 parent 8e50fa6
commit 0eeb2a0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/components/coc-card/ActionButton.vue b/src/components/coc-card/ActionButton.vue
@@ -2,8 +2,13 @@
 interface Props {
   fullWidth?: boolean;
   disabled?: boolean;
+  tag?: string;
 }
-withDefaults(defineProps<Props>(), { fullWidth: false, disabled: false });
+withDefaults(defineProps<Props>(), {
+  fullWidth: false,
+  disabled: false,
+  tag: 'button',
+});
 
 interface Emits {
   (event: 'click', evt?: MouseEvent): void;
@@ -12,7 +17,8 @@ defineEmits<Emits>();
 </script>
 
 <template>
-  <button
+  <component
+    :is="tag"
     class="action-button"
     :class="{
       'action-button-full-width': fullWidth,
@@ -21,7 +27,7 @@ defineEmits<Emits>();
     :disabled="disabled"
   >
     <slot></slot>
-  </button>
+  </component>
 </template>
 
 <style scoped lang="scss">

diff --git a/src/components/coc-card/AvatarModalContent.vue b/src/components/coc-card/AvatarModalContent.vue
@@ -90,7 +90,12 @@ function refreshSDImages() {
   <div class="avatar-modal-content">
     <div class="action-buttons">
       <UploadAvatarButtonWrapper @uploaded="onUploaded">
-        <ActionButton fullWidth>上传形象</ActionButton>
+        <ActionButton
+          tag="div"
+          fullWidth
+        >
+          上传形象
+        </ActionButton>
       </UploadAvatarButtonWrapper>
       <ActionButton
         fullWidth

diff --git a/src/components/coc-card/UploadAvatarButtonWrapper.vue b/src/components/coc-card/UploadAvatarButtonWrapper.vue
@@ -9,9 +9,14 @@ import {
 import { getImageSize } from '@/utils/image';
 import { usePC } from '@/hooks/useCOCCardProviders';
 
+interface Props {
+  id?: string;
+}
 interface Emits {
   (event: 'uploaded', url: string): void;
 }
+
+defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const WIDTH = 132 * 2;
@@ -47,8 +52,9 @@ async function handleUpload(event: Event) {
 </script>
 
 <template>
-  <label>
+  <label :for="id">
     <input
+      :id="id"
       class="input-file"
       type="file"
       accept="image/*"