You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
1.9 KiB
105 lines
1.9 KiB
<template>
|
|
<view class="niu-tree component">
|
|
<view class="niu-tree__item" v-for="(item,index) in list" :key="index">
|
|
<view class="niu-tree__title" @click="clickFile(item,index)">
|
|
<niu-image right="10rpx" :src="item.isFloder?'/static/dir.svg':'/static/file.svg'" height="35rpx"
|
|
width="35rpx" mode=""></niu-image>
|
|
<view class="niu-tree__title__text">{{item.title}}</view>
|
|
</view>
|
|
<view class="niu-tree__sub" :class="[item.isOpen?'':'close']">
|
|
<niu-tree :list="item.children"></niu-tree>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import anim from "./anim.vue"
|
|
export default {
|
|
name: "niu-tree",
|
|
components: {
|
|
anim
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => [{
|
|
title: "文件夹1",
|
|
isFloder: true,
|
|
isOpen: true,
|
|
children: [{
|
|
title: "文件夹2",
|
|
isFloder: true,
|
|
isOpen: true,
|
|
children: [{
|
|
title: "文件夹3",
|
|
isFloder: false,
|
|
isOpen: false,
|
|
children: [
|
|
|
|
]
|
|
}]
|
|
}]
|
|
}, {
|
|
title: "asdsad",
|
|
isFloder: true,
|
|
isOpen: false,
|
|
children: [{
|
|
title: "asd",
|
|
isFloder: true,
|
|
isOpen: false,
|
|
children: [{
|
|
title: "asdasdas",
|
|
isFloder: false,
|
|
isOpen: false,
|
|
children: [
|
|
|
|
]
|
|
}]
|
|
}]
|
|
}]
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
clickFile(item) {
|
|
item.isOpen = !item.isOpen
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.niu-tree.component {
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
|
|
.niu-tree__title {
|
|
padding: 10rpx 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__text {
|
|
flex: 1;
|
|
width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.niu-tree__sub {
|
|
margin-left: 20rpx;
|
|
height: auto;
|
|
overflow: hidden;
|
|
transition: height .5s linear;
|
|
&.close{
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|