♻️ 基础组件封装

src/components/app/t-mi-img.vue

@@ -0,0 +1,42 @@
+<template>
+  <img
+    :src="localUrl"
+    :alt="props.alt"
+    :title="props.title"
+    v-if="localUrl"
+    @click="emits('click')"
+    :class="props.class"
+  />
+  <v-progress-circular v-else indeterminate color="primary" size="25" />
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from "vue";
+
+import { useAppStore } from "@/store/modules/app.js";
+import { saveImgLocal } from "@/utils/TGShare.js";
+
+type TMiImgProps = {
+  src: string;
+  alt: string;
+  title?: string;
+  class?: string;
+  ori?: boolean;
+};
+type TMiImgEmits = {
+  (e: "click"): void;
+};
+const props = defineProps<TMiImgProps>();
+const emits = defineEmits<TMiImgEmits>();
+
+const appStore = useAppStore();
+const localUrl = ref<string>();
+
+onMounted(async () => {
+  const link = props.ori ? props.src : appStore.getImageUrl(props.src);
+  localUrl.value = await saveImgLocal(link);
+});
+
+onUnmounted(() => {
+  if (localUrl.value) URL.revokeObjectURL(localUrl.value);
+});
+</script>