【Vue3】首页主体-封装查看更多组件

<script lang="ts" setup name="More">
import { defineProps } from 'vue'
defineProps({
  path: {
    type: String,
    default: '/',
  },
})
</script>
<template>
  <RouterLink :to="path" class="more">
    <span><slot>查看全部</slot></span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>
<style scoped lang="less">
.more {
  margin-bottom: 2px;
  span {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
  }
  i {
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #ccc;
  }
  &:hover {
    span,
    i {
      color: @dsColor;
    }
  }
}
</style>

import type { App } from 'vue'
import Skelecton from './skeleton/index.vue'
import Carousel from './carousel/index.vue'
import More from './more/index.vue'
export default {
  install(app: App) {
    app.component('Skelecton', Skelecton)
    app.component('Carousel', Carousel)
    app.component('More', More)
  },
}

import Skeleton from '@/components/skeleton/index.vue'
import Carousel from '@/components/carousel/index.vue'
import More from '@/components/more/index.vue'
declare module 'vue' {
  export interface GlobalComponents {
    Skeleton: typeof Skeleton
    Carousel: typeof Carousel
    More: typeof More
  }
}
export {}

<More>查看更多</More>