[text] ToggleComponent

Viewer

copydownloadembedprintName: ToggleComponent
  1. <template>
  2.   <div>
  3.     <template v-if="show === 'default'">
  4.       <slot name="default" :toggle-view="toggleView"></slot>
  5.     </template>
  6.     <template v-if="show === 'alternative'">
  7.       <slot name="alternative" :toggle-view="toggleView"></slot>
  8.     </template>
  9.   </div>
  10. </template>
  11.  
  12. <script setup lang="ts">
  13. import { ref } from 'vue';
  14.  
  15. const show = ref<string>('default')
  16. const toggleView = () => {
  17.   if (show.value === 'default') {
  18.     show.value = 'alternative'
  19.   } else {
  20.     show.value = 'default'
  21.   }
  22. }
  23. </script>

Editor

You can edit this paste and save as new:


File Description
  • ToggleComponent
  • Paste Code
  • 01 Jul-2022
  • 541 Bytes
You can Share it: