fs-uni-template/components/fs-grid-item/fs-grid-item.vue

<template>
	<view
		class="fs-grid-item"
		:class="{ 'fs-grid-item-border': border, 'fs-grid-item-radius': radius }"
		:style="{ padding: padding ? '20rpx 0' : 0, backgroundColor: bgColor }"
		@click="handleClick"
	>
		<slot></slot>
	</view>
</template>

<script>
/**
 * 宫格项组件
 * @description 宫格项组件
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 */
export default {
	name: 'fs-grid-item'
}
</script>

<script setup>
import { inject } from 'vue'

const props = defineProps({
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	}
})

const emits = defineEmits(['click'])

const gird = inject('fsGrid', {})

const { border, padding, bgColor, radius } = gird

const handleClick = () => {
	if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
	emits('click')
}
</script>

<style lang="scss" scoped>
.fs-grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	position: relative;
	height: 100%;
	background-color: #fff;

	&-border::before {
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid var(--border-color);
		margin-left: -1px;
		margin-top: -1px;
	}

	&-radius {
		border-radius: var(--radius);
	}
}
</style>