首页主体-查看更多组件
封装一个通用的查看更多组件
功能:
- 可以配置跳转路径
- 可以动态传入展示的文字
(1)创建组件src/components/more/index.vue
<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>
(2)全局注册src/components/index.ts
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)
},
}
(3)定义全局组件类型global.d.ts
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 {
}
(4)查看效果
<More>查看更多</More>
小技巧
- 子组件如果只有一个根标签,父组件传递过去的数据会能够穿透
- 如果子组件通过defineProps定义的数据不会出现在标签的身上