Advertisement
fabiobiondi

Vue 💩

Jun 8th, 2023
1,292
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script setup lang="ts" generic="T">
  2. import { ref } from 'vue';
  3.  
  4.  
  5. /*
  6.  
  7. const props = defineProps({
  8.   title: {
  9.     type: String,
  10.     required: true,
  11.   },
  12.   icon: String,
  13.   isOpen: {
  14.     type: Boolean,
  15.     default: true
  16.   },
  17. });
  18. */
  19.  
  20.  
  21. export interface Props<T> {
  22.   title: T;
  23.   icon: string;
  24.   isOpen: boolean;
  25. }
  26.  
  27. export const props = defineProps<Props<T>>()
  28.  
  29. const emit = defineEmits<{
  30.   iconClick: [list: T[]]
  31. }>()
  32.  
  33.  
  34. const isOpen = ref(props.isOpen);
  35.  
  36. </script>
  37.  
  38.  
  39. <template>
  40.   <div>
  41.     <div
  42.       class="flex justify-between bg-slate-800 text-white p-3"
  43.       @click="isOpen = !isOpen"
  44.     >
  45.       {{ title }}
  46.       <div
  47.           @click.stop="emit('iconClick', [])"
  48.       >{{icon}}</div>
  49.     </div>
  50.  
  51.     <div class="p-3 bg-slate-200" v-if="isOpen">
  52.       <slot />
  53.     </div>
  54.   </div>
  55. </template>
  56.  
  57.  
  58.  
  59. // ------
  60.  
  61.  
  62.  
  63. <script setup lang="ts">
  64. // src/App.vue
  65. import Panel from './components/Panel.vue';
  66.  
  67. function doSomething() {
  68.   window.alert('hello')
  69. }
  70. </script>
  71.  
  72. <template>
  73.   <Panel title="one">
  74.     content one
  75.   </Panel>
  76.  
  77.   <Panel
  78.     title="two"
  79.     icon="😅"
  80.     :isOpen="false"
  81.     @iconClick="doSomething"
  82.   >
  83.     content two
  84.   </Panel>
  85. </template>
  86.  
  87.  
  88.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement