renderer: Index: childern as functional components

Rocket1184 · Mar 2, 2020 · 07d90f1 · 07d90f1
1 parent 9a7f5d4
commit 07d90f1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/src/renderer/page/Index/ActionItem.vue b/src/renderer/page/Index/ActionItem.vue
@@ -1,12 +1,12 @@
-<template>
+<template functional>
     <router-link tag="div"
         class="action-item"
-        :to="to">
+        :to="props.to">
         <div class="item-icon mu-primary-text-color">
-            <mu-icon :value="icon"
+            <mu-icon :value="props.icon"
                 :size="48"></mu-icon>
         </div>
-        <p class="item-desc">{{title}}</p>
+        <p class="item-desc">{{ props.title }}</p>
     </router-link>
 </template>
 
@@ -34,6 +34,7 @@ export default {
     .item-icon {
         width: 72px;
         height: 72px;
+        box-sizing: border-box;
         border: 2px solid currentColor;
         border-radius: 50%;
         display: flex;

diff --git a/src/renderer/page/Index/Index.vue b/src/renderer/page/Index/Index.vue
@@ -29,7 +29,7 @@
                     <ScrollerItem v-for="al in album"
                         :key="al.id"
                         :to="{ name: 'album', params: { id: al.id } }"
-                        :img="al.picUrl"
+                        :img="itemImg(al.picUrl)"
                         :title="al.copywriter"
                         :itemTitle="al.name"
                         :itemSubTitle="al.artistName"></ScrollerItem>
@@ -42,7 +42,7 @@
                     <ScrollerItem v-for="v in mv"
                         :key="v.id"
                         :to="{ name: 'video', params: { id: v.id } }"
-                        :img="v.picUrl"
+                        :img="itemImg(v.picUrl)"
                         :title="v.copywriter"
                         :itemTitle="v.name"
                         :itemSubTitle="v.artistName"></ScrollerItem>
@@ -56,9 +56,12 @@
 import { mapState } from 'vuex';
 
 import Api from '@/api/ipc';
+
 import ActionItem from './ActionItem.vue';
 import ScrollerItem from './ScrollerItem.vue';
+
 import { humanCount } from '@/util/formatter';
+import { sizeImg, HiDpiPx } from '@/util/image';
 import { SET_LOGIN_VALID } from '@/store/mutation-types';
 
 const algBlockList = [
@@ -126,6 +129,9 @@ export default {
             this.getAlbums();
             this.getMVs();
         },
+        itemImg(src) {
+            return sizeImg(src, HiDpiPx(160));
+        }
     },
     created() {
         this.fetchData();

diff --git a/src/renderer/page/Index/ScrollerItem.vue b/src/renderer/page/Index/ScrollerItem.vue
@@ -1,35 +1,32 @@
-<template>
-    <router-link :to="to"
-        :title="title"
+<template functional>
+    <router-link :to="props.to"
+        :title="props.title"
         tag="div"
         class="scroll-item">
         <div class="cover">
             <img class="img"
-                :src="imgSrc"
-                :alt="title"
+                :src="props.img"
+                :alt="props.title"
                 width="160"
                 height="160">
-            <div v-if="maskIcon"
+            <div v-if="props.maskIcon"
                 class="mask">
-                <mu-icon :value="maskIcon"
+                <mu-icon :value="props.maskIcon"
                     :size="16"></mu-icon>
-                <span class="text">{{maskText}}</span>
+                <span class="text">{{ props.maskText }}</span>
             </div>
         </div>
         <div v-if="itemSubTitle"
             class="caption">
-            <div class="title__sup">{{itemTitle}}</div>
-            <div class="title__sub">{{itemSubTitle}}</div>
+            <div class="title__sup">{{ props.itemTitle }}</div>
+            <div class="title__sub">{{ props.itemSubTitle }}</div>
         </div>
         <div class="caption"
-            v-else>{{itemTitle}}</div>
+            v-else>{{ props.itemTitle }}</div>
     </router-link>
 </template>
 
 <script>
-import { sizeImg, HiDpiPx } from '@/util/image';
-import coverDefault from 'assets/img/cover_default.webp';
-
 export default {
     props: {
         to: {
@@ -58,11 +55,6 @@ export default {
             type: String,
             required: false
         }
-    },
-    computed: {
-        imgSrc() {
-            return sizeImg(this.img || coverDefault, HiDpiPx(160));
-        }
     }
 };
 </script>