feat: slot

DrAugus · Dec 20, 2022 · d3e86c1 · d3e86c1
1 parent eec70f1
commit d3e86c1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 44 deletions.
diff --git a/src/components/BannerList.vue b/src/components/BannerList.vue
@@ -3,20 +3,18 @@
 
     <v-list lines="two">
 
-        <v-list-item v-for="(v, i) in WISH.characters" :key="imgName(v)" :title="v.name" :subtitle="v.shortName"
-            :prepend-avatar="combineCharImage(v.wish5star)" :value="imgName(v)"
-            :active-color="colorCharEle(v.wish5star)" rounded="xl">
+        <v-list-item v-for="(v, i) in WISH.characters" :key="imgName(v)" :title="v.wishName"
+            :subtitle="charZH(v.wish5star)" :prepend-avatar="combineCharImage(v.wish5star)" :value="imgName(v)"
+            :active-color="colorCharEle(v.wish5star)" rounded="xl" @click="sendImg(v)">
 
         </v-list-item>
 
     </v-list>
 
-    <BannerPage :img="bannerImg"></BannerPage>
 
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from 'vue';
 import { WISH } from '../script/genshin/wish'
 import { replaceAndLow, ElementColor } from '../script/genshin/utils'
 import { CHARACTER, Characters } from '../script/genshin/characters'
@@ -34,25 +32,23 @@ const colorCharEle = (v: string) => {
     return ElementColor[index_ele]
 }
 
+const charZH = (v: string) => Object.values(CHARACTER)[Object.keys(CHARACTER).indexOf(v)].name;
+
 let bannerImg = ''
 
-const showBannerPage = (v: string) => {
+const showBannerPage = (v: any) => {
     bannerImg = combineWishImage(imgName(v))
-    console.log(bannerImg)
 }
 
-// defineComponent({
-//     data(){
-//         return {
-//             bannerImg :'',
-//         }
-//     },
-//     methods:{
-//         showBannerPage(v:string){
-//             this.bannerImg = combineWishImage(imgName(v))
-//         }
-//     },
-// })
+const emit = defineEmits(['send-img'])
+
+const sendImg = (v: any) => {
+
+    showBannerPage(v)
+    emit('send-img', bannerImg)
+    console.log("bannerImg", bannerImg)
+}
+
 
 
 </script>
diff --git a/src/components/BannerPage.vue b/src/components/BannerPage.vue
@@ -1,12 +1,15 @@
 <template>
-    <v-img class="bg-white" width="300" :aspect-ratio="1" :src="img" cover></v-img>
+
+    <v-img class="bg-white" height="300" :aspect-ratio="1" :src="props.img"></v-img>
+
+    link | {{ props.img }}
+
 </template>
 
 <script setup lang="ts">
-defineProps({
-    img: {
-        type: String,
-        default: ''
-    },
-})
+const props = defineProps<{
+    img: string
+}>()
+
+console.log("img", props.img)
 </script>
diff --git a/src/components/HomeSider.vue b/src/components/HomeSider.vue
@@ -15,37 +15,32 @@
 
             <v-navigation-drawer permanent>
 
-                <BannerList>
+                <BannerList v-on:send-img="showshow">
 
                 </BannerList>
             </v-navigation-drawer>
 
             <v-main>
-                <slot></slot>
+                <slot></slot> 
+                <BannerPage v-bind:img="aa"></BannerPage>
             </v-main>
         </v-layout>
     </v-card>
 </template>
 
 
 <script setup lang="ts">
-
 import BannerList from './BannerList.vue'
 import BannerPage from './BannerPage.vue'
 import HelloWorld from './HelloWorld.vue';
-defineProps({
-    icon: {
-        type: String,
-        default: ''
-    },
-    iconClass: {
-        type: String,
-        default: ''
-    },
-    blurry: {
-        type: Boolean,
-        default: true,
-        required: false
-    }
-})
+
+let aa = 'https://github.com/DrAugus/data/blob/master/game/genshin/wish/dance_of_lanterns_1.jpg?raw=true'
+// aa = ''
+
+const showshow = (v: string) => {
+    aa = v;
+    console.log("aa", aa)
+}
+
+
 </script>