forked from angelo/web-retail-h5
95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: 王三华
|
|
* @Date: 2023-07-28 16:30:26
|
|
-->
|
|
<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="#ee252a" 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="#ee252a" name="minus-circle"></u-icon>
|
|
|
|
</view>
|
|
<view class="fzbtn">
|
|
<u-button @click="copyText(item.splice)" class='thebtn' size="small" :text="$t('MY_CK_27')"></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: this.$t('MY_CK_29'),
|
|
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> |