ImageTabSwitch.vue 847 B

12345678910111213141516171819202122
  1. <template>
  2. <div class="models--visual--tab--type">
  3. <div class="thumb--wrap">
  4. <img :src="activeTab === 'exterior' ? exteriorImg : interiorImg" />
  5. </div>
  6. <p v-if="activeTab === 'interior'" class="theme--name">{{ interiorName }}</p>
  7. <div class="chg--tab--wrap">
  8. <button class="ex--btn" :class="{ active: activeTab === 'exterior' }" @click="activeTab = 'exterior'"><i class="ico"></i>EXTERIOR</button>
  9. <button class="in--btn" :class="{ active: activeTab === 'interior' }" @click="activeTab = 'interior'"><i class="ico"></i>INTERIOR</button>
  10. </div>
  11. </div>
  12. </template>
  13. <script setup>
  14. const props = defineProps({
  15. exteriorImg: { type: String, required: true },
  16. interiorImg: { type: String, required: true },
  17. interiorName: { type: String, required: false }
  18. });
  19. const activeTab = ref('exterior');
  20. </script>