思维导图 xTreeFlat

---

在线预览

在线模拟尺寸:

介绍

主要用来展示平面树平面结构,思维导图的展示

平台兼容

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

文件路径

@/uni_modules/tmx-ui/components/x-tree-flat/x-tree-flat.uvue

使用

<x-tree-flat></x-tree-flat>

Props 属性

名称	说明	类型	默认值
canvasWidth	``	``	800
canvasHeight	``	``	800
width	``	``	'100%'
height	``	``	'600'
list	``	``	[] as XTREEFLAT_NODES[]
opts	``	``	null as XTreeFlatOpts null

Events 事件

名称	参数	说明
init	-	引擎初始化完成,可以进行通过ref来异步设置数据
change	-	当list数据被编辑变动时触发
click	item:XTREEFLAT_CHILDREN	当前节点被点击时触发

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明
setData	list: XTREEFLAT_NODES[] - 树形节点数据数组	-	设置树形组件的数据

示例文件路径

/pages/qita/tree-flat

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #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">思维导图 xTreeFlat</x-text>
			<x-text color="#999999">
				这是一个横向布局的思维导图,可以用来展示结构或组织架构或流程,纯原生绘制,性能高
			</x-text>
			<x-radio-group class="mt-16" v-model="layout">
				<x-radio value="horizontal" class="mr-24" label="横向布局"></x-radio>
				<x-radio value="vertical" label="上下布局"></x-radio>
			</x-radio-group>
		</x-sheet>
		<view class="flex-1">
			<!-- :list="nodes"  -->
			<x-tree-flat :canvasWidth="1200" :opts="opts" ref="xmind" @init="oninit"  height="100%" ></x-tree-flat>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import { XTreeFlatOpts,XTREEFLAT_NODES } from '@/uni_modules/tmx-ui/interface';
	import mockDatalist from "./mock.uts"
	const xmind = ref<XTreeFlatComponentPublicInstance | null>(null)
	const layout = ref<'horizontal' | 'vertical'>('horizontal')
	const opts = computed(():XTreeFlatOpts => {
		return { lineWidth:2,layout:layout.value } as XTreeFlatOpts
	})
	const oninit = () => {
		console.warn("导图引擎启动成功，可以设置数据了")
		xmind.value!.setData(mockDatalist)
	}
	
</script>

<style>
	/* #ifdef MP */
	page,
	body {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* #endif */
</style>