引导子组件 xGuidItem

---

预览

介绍

内部只可放置在x-guid内。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.87+	1.1.21

文件路径

@/uni_modules/tmx-ui/components/x-guid-item/x-guid-item.uvue

使用

<x-guid-item></x-guid-item>

Props 属性

名称	说明	类型	默认值
targetId	必填；唯一标识;且不可以动态变更;可以通过重新渲染变更id;这个是目标元素上的id, 且是唯一，必须在页面中，不可以封装在子组件内，也不可以隐藏中的元素id， 必须是明确且可见的元素id	string	""
order	必填；顺序索引，一般循环的index即可。	number	0
title	标题	string	""
content	内容描述	string	""

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据
title	-	-

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/daohang/guid

示例源码

uvue

<template>
	<!-- activeId -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class="text-weight-b mb-8">引导 xGuid {{activeId}}</x-text>
		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
	</x-sheet>
	<view style="height:50px"></view>
	<view id="testId1" class="mx-16 mb-16 pa-16">
		<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
		<view>
			<x-text color="#999999">testId1</x-text>
		</view>
	</view>
	<view style="height:200px"></view>
	<view id="testId2" class="mx-16 mb-16 pa-16">
		<x-text font-size="18" class="text-weight-b mb-8">节点2 testId2</x-text>
		<view>
			<x-text color="#999999">testId2</x-text>
		</view>
	</view>
	<view style="height:550px"></view>
	<x-sheet id="testId3">
		<x-text font-size="18" class="text-weight-b mb-8">节点3 testId3</x-text>
		<view>
			<x-text color="#999999">testId3</x-text>
		</view>
	</x-sheet>
	<view style="height:800px"></view>
	<view class="mx-16 mb-16 pa-16" id="testId4">
		<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
		<view class="flex flex-row flex-row-center-end">
			<view>
				<x-text color="#999999">testId4</x-text>
			</view>
		</view>
	</view>
	<view style="height:200px"></view>
	<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
		<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`"
			:title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
	</x-guid>
</template>

<script lang="ts" setup>
	const activeId = ref('')
	
</script>

<style lang="scss">
</style>