add icon

upangka · Oct 12, 2022 · f6d7d4c · f6d7d4c
1 parent 304c0cc
commit f6d7d4c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/src/components/icons/NextIcon.vue b/src/components/icons/NextIcon.vue
@@ -0,0 +1,3 @@
+<template>
+  <i class="iconfont icon-next"></i>
+</template>
diff --git a/src/components/icons/PrevIcon.vue b/src/components/icons/PrevIcon.vue
@@ -0,0 +1,3 @@
+<template>
+  <i class="iconfont icon-lunbo"></i>
+</template>
diff --git a/src/components/libraries/carousel/CarouselComponent.vue b/src/components/libraries/carousel/CarouselComponent.vue
@@ -9,11 +9,11 @@
     </ul>
 
     <a href="javascript:void(0)" class="prev" @click="toggle(false)">
-      <i class="iconfont icon-lunbo"></i
-    ></a>
+      <PrevIcon></PrevIcon>
+    </a>
     <a href="javascript:void(0)" class="next" @click="toggle(true)">
-      <i class="iconfont icon-next"></i
-    ></a>
+      <NextIcon></NextIcon>
+    </a>
     <div class="indicator">
       <span
         v-for="i in dotCount"
@@ -28,6 +28,7 @@
 <script lang="ts" setup>
 import { onUnmounted, computed, watch, ref } from "vue"
 import type { Banner } from "@/types/category/Banner"
+import NextIcon from "../../icons/NextIcon.vue"
 
 interface Props {
   slides: Banner[]

diff --git a/src/components/libraries/more/LookMore.vue b/src/components/libraries/more/LookMore.vue
@@ -0,0 +1,6 @@
+<template>
+  <RouterLink to="/">
+    <span>查看全部</span>
+    <NextIcon></NextIcon>
+  </RouterLink>
+</template>
diff --git a/src/plugins/ui/index.ts b/src/plugins/ui/index.ts
@@ -1,14 +1,21 @@
 /**
  * 该插件用于安装组件
  */
+import type { App } from "vue"
+
 import SkeletonComponent from "@/components/libraries/skeleton/SkeletonComponent.vue"
 import CarouselComponent from "@/components/libraries/carousel/CarouselComponent.vue"
-import type { App } from "vue"
+import NextIcon from "@/components/icons/NextIcon.vue"
+import PrevIcon from "@/components/icons/PrevIcon.vue"
+import LookMore from "@/components/libraries/more/LookMore.vue"
 
 const UIPlugin = {
   install(app: App) {
-    app.component("SkeletonComponent", SkeletonComponent),
-      app.component("CarouselComponent", CarouselComponent)
+    app.component("SkeletonComponent", SkeletonComponent)
+    app.component("CarouselComponent", CarouselComponent)
+    app.component("LookMore", LookMore)
+    app.component("NextIcon", NextIcon)
+    app.component("PrevIcon", PrevIcon)
   },
 }