feat: 选项卡组件显隐交互

pages/index/index.vue

@@ -4,40 +4,42 @@
 		:style="[styleObject]"
 	>
 		<view v-for="element in reportData" :key="item.id">
-			<!-- 普通柱状图 -->
-			<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
-			<!-- 普通折线图 -->
-			<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
-			<!-- 横向柱状图 -->
-			<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
-			<!-- 折柱图 -->
-			<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
-			<!-- 仪表盘 -->
-			<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
-			<!-- 饼图 -->
-			<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
-			<!-- 中国地图 -->
-			<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
-			<!-- 柱状图混合地图 -->
-			<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
-			<!-- 雷达图 -->
-			<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
-			<!-- 普通数字滚动 -->
-			<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
-			<!-- 数字滚动 -->
-			<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
-			<!-- 普通选项卡 -->
-			<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
-			<!-- 文本框 -->
-			<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
-			<!-- 真实时间 -->
-			<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
-            <!-- 普通进度条 -->
-            <NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
-			<!-- 普通图片 -->
-			<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
-			<!-- 远程图片 -->
-			<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
+			<template v-if="!element.hide">
+				<!-- 普通柱状图 -->
+				<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
+				<!-- 普通折线图 -->
+				<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
+				<!-- 横向柱状图 -->
+				<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
+				<!-- 折柱图 -->
+				<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
+				<!-- 仪表盘 -->
+				<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
+				<!-- 饼图 -->
+				<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
+				<!-- 中国地图 -->
+				<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
+				<!-- 柱状图混合地图 -->
+				<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
+				<!-- 雷达图 -->
+				<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
+				<!-- 普通数字滚动 -->
+				<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
+				<!-- 数字滚动 -->
+				<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
+				<!-- 普通选项卡 -->
+				<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
+				<!-- 文本框 -->
+				<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
+				<!-- 真实时间 -->
+				<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
+				<!-- 普通进度条 -->
+				<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
+				<!-- 普通图片 -->
+				<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
+				<!-- 远程图片 -->
+				<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
+			</template>
 		</view>
   </view>
 </template>
@@ -71,6 +73,16 @@
 			uni.$on('handleLinkParams', ({index, paramName, value}) => {
 				this.handleValueChange(index, paramName, value)
 			})
+			/**
+			 * 组件交互 - 组件
+			 */
+			uni.$on('handleLinkComp', ({ showData, hideData }) => {
+				this.reportData.map(item => {
+					if(showData.includes(item.id)) item.hide = false
+					if(hideData.includes(item.id)) item.hide = true
+					return item
+				})
+			})
 		},  
 		onUnload() {
 			// 移除监听事件