适用于移动端个人页的功能分类导航(仅页面)组件封装

先上效果图

这个组件只是页面的展示，如果想更完整的功能，则需要在 usebody 组件添加一个事件，在向父组件提交事件来监听点击的是哪个功能以跳转具体页面

上代码

主页面

<template>
	<view class="content">
		<view class="inner">
			<usecategory :date="arr.children" :cow="5">
				<usebody :usetop="top" :title="bottom"></usebody>
			</usecategory>
		</view>
	</view>
</template>

<script>
	import usecategory from "../../components/usecategory.vue"
	import usebody from "../../components/usebody.vue"
	export default {
		components: {
			usecategory,
			usebody
		},
		data() {
			return {
				arr: {
					title: "站点管理",
					children: [{
							title: "星级评定",
							src:'图片'
						},
						{
							title: "满意度调查",
							src:'图片'
						},
						{
							title: "年审年检",
							src:'图片'
						},
						{
							title: "站点巡查",
							src:'图片'
						},
						{
							title: "工作日志",
							src:'图片'
						},
						{
							title: "会议签到",
							src:'图片'
						},
						{
							title: "培训学习",
							src:'图片'
						}
					]
				},
				top:'src',
				bottom:'title'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #eeeeee;
		padding-top: 400rpx;
	}
	.inner{
		margin: 0 24rpx;
		padding: 24rpx 24rpx;
		background-color: white;
		border-radius: 24rpx;
	}
</style>

父组件

<template>
	<view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"usecategory",
		props:{
			//数据
			date:{
				type:[Array]
			},
			//一行有几个
			cow:{
				type:[Number,String],
				default:5
			},
			
		},
		computed:{
		},
		data() {
			return {
				usedate:this.date,
				usecow:this.cow
			};
		}
	}
</script>

<style>

</style>

子组件

<template>
	<view class="use_body">
		<view class="item" :style="[bodystyle]" v-for="item in temptArr">
			<view class="useImg">
				{{item.imgSrc}}
			</view>
			<view class="use_code">
				{{item.code}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"usebody",
		props:{
			usetop:{
				type:[String]
			},
			title:{
				type:[String]
			}
		},
		data() {
			return {
				temptArr:[]
			};
		},
		computed:{
			usedate(){
				return this.$parent.$parent.$data.usedate
			},
			use(){
				return this.$parent.$parent.$data.usecow
			},
			bodystyle(){
				let style={}
				let w = parseInt(100 / (Number(this.use))) 
				style.width = `${w}%`
				return style
			},
			topCode(){
				return this.usetop
			},
			bottomCode(){
				return this.title
			}
		},
		mounted() {
			console.log(this.$parent.$parent.$data.usecow)
			console.log(this.usedate)
			this.usedate.map(item=>{
				let obj={}
				for( let k in item){
					if( k == this.topCode){
						obj.imgSrc = item[k]
					}
					if(k == this.bottomCode){
						obj.code = item[k] 
					}
				}
				this.temptArr.push(obj)
			})
		}
	}
</script>

<style scoped>
	.use_body{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between */
	}
	.item{
		height: 120rpx;
		/* background-color: black; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.useImg{
		width: 60rpx;
		height: 60rpx;
		background-color: aqua;
	}
	.useImg image{
		width: 60rpx;
		height: 60rpx;
	}
	.use_code{
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		font-size: 24rpx;
	}
</style>