web-store-retail-h5/components/treeItem.vue

<template>
	<view>
		<view v-for="(item,index) in data" :key="item.id">
			<view class="thetree">
				<view @click="toggleNode(index)" class="arrow"
					v-if="!expanded && item.children && item.children.length > 0">
					<u-icon size="56rpx" color="#005BAC" name="plus-circle"></u-icon>

				</view>
				<view @click="toggleNode(index)" class="arrow"
					v-if="expanded && item.children && item.children.length > 0">
					<u-icon size="56rpx" color="#005BAC" name="minus-circle"></u-icon>

				</view>
				<view class="fzbtn">
					<u-button @click="copyText(item.splice)" class='thebtn' size="small" :text="'复制'"></u-button>
				</view>
				<view class="maintree">{{ item.splice }}</view>

			</view>
			<tree-item style="margin-left: 40rpx;" v-if="item.isShow &&item.children" :data="item.children"></tree-item>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TreeItem',
		props: ['data'],

		data() {
			const newData = this.data;
			newData.forEach((item) => {
				item.isShow = false;
			});
			return {
				expanded: false, // 初始状态为折叠
				
			};
		},
		watch: {
			data(val) {
				this.data = val
			}
		},

		methods: {
			copyText(text){
				this.$copyText(text).then((res) => {
				  uni.showToast({
				    title: '复制成功',
				    icon: 'none',
				  })
				})
			},
			toggleNode(index) {
				if (this.data[index].children && this.data[index].children.length > 0) {
					this.expanded = !this.expanded; // 切换展开和折叠状态
					this.data[index].isShow = !this.data[index].isShow;
				}


			}
		}
	}
</script>
<style lang="scss" scoped>
	.thetree {
		display: flex;
		align-items: center;

		.fzbtn {
			.thebtn{
				color: #333333;
				background-color: #ffffff;
			}
		}

		.maintree {
			border: 2rpx solid #EEEEEE;
			border-radius: 10rpx;
			font-size: 24rpx;
			background: #F3F3F3;
			margin-left: 20rpx;
			padding: 28rpx 25rpx;
			margin-top: 27rpx;
		}
	}
</style>