[html5] ToggleComponent And ToggleComponentGroup

Viewer

copydownloadembedprintName: ToggleComponent And ToggleComponentGroup
  1. <template>
  2.   <div>
  3.     <slot></slot>
  4.   </div>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8. import { provide, reactive, computed } from 'vue'
  9.  
  10. const views = reactive(new Map<Object, string>())
  11.  
  12. const toggleView = (key: Object) => {
  13.   if (views.get(key) === 'default') {
  14.     views.set(key,  'alternative')
  15.   } else {
  16.     views.set(key, 'default')
  17.   }
  18. }
  19.  
  20. const registerView = (key: Object) => {
  21.   views.set(key, 'default')
  22. }
  23.  
  24. const getView = (key: Object) => {
  25.   return computed(() => views.get(key))
  26. }
  27.  
  28. provide('foo', { registerView, toggleView, getView })
  29. </script>
  30.  
  31.  
  32.  
  33. <template>
  34.   <div>
  35.     <template v-if="show === 'default'">
  36.       <slot name="default" :toggle-view="toggleView"></slot>
  37.     </template>
  38.     <template v-if="show === 'alternative'">
  39.       <slot name="alternative" :toggle-view="toggleView"></slot>
  40.     </template>
  41.   </div>
  42. </template>
  43.  
  44. <script setup lang="ts">
  45. import { type Ref, inject, ref } from 'vue'
  46.  
  47. const props = defineProps<{
  48.   value: object | string | number
  49. }>()
  50.  
  51. const provided = inject<{
  52.   registerView: (key: Object) => void,
  53.   toggleView: (key: Object) => void,
  54.   getView: (key: Object) => Ref<string>
  55. }>('foo')
  56.  
  57. const { show, toggleView } = (() => {
  58.   if (provided) {
  59.     const { registerView, toggleView, getView } = provided
  60.     const value = props.value || 'default'
  61.  
  62.     registerView(value)
  63.     return {
  64.       show: getView(value),
  65.       toggleView: () => toggleView(value)
  66.     }
  67.   } else {
  68.     const show = ref<string>('default')
  69.  
  70.     return {
  71.       show,
  72.       toggleView: () => {
  73.         if (show.value === 'default') {
  74.           show.value = 'alternative'
  75.         } else {
  76.           show.value = 'default'
  77.         }
  78.       }
  79.     }
  80.   }
  81. })()
  82. </script>

Editor

You can edit this paste and save as new:


File Description
  • ToggleComponent And ToggleComponentGroup
  • Paste Code
  • 01 Jul-2022
  • 1.72 Kb
You can Share it: