1  <script setup lang="tsx">
 2  defineProps<{
 3    src: string
 4  }>()
 5  </script>
 6  
 7  <template>
 8    <v-dialog>
 9      <template #activator="{ props: activatorProps }">
10        <div>
11          <v-img
12            class="history-images mb-3"
13            contain
14            position="left"
15            min-width="80px"
16            min-height="80px"
17            width="100%"
18            height="100%"
19            max-width="30vw"
20            max-height="30vh"
21            v-bind="activatorProps"
22            :src="src"
23          ></v-img>
24        </div>
25      </template>
26      <template #default="{ isActive }">
27        <v-img
28          :src="src"
29          contain
30          width="80vw"
31          height="80vh"
32          max-width="100%"
33          max-height="100%"
34          @click="isActive.value = false"
35        ></v-img>
36      </template>
37    </v-dialog>
38  </template>
39  
40  <style scoped>
41  .history-images {
42    &:hover {
43      cursor: zoom-in;
44    }
45  }
46  </style>