无限循环层级菜单怎么做?以文件目录为例...

<view id="folder">
<view v-show="!isRoot" @click="back">...back</view>
	<view v-for="(item,index) in children" @click="openDir(item,index)">
		<image src="文件夹图标地址" v-show="!isFile"></image>
		<image src="文件图标地址" v-show="isFile"></image>
		<view class="fileName">文件夹/文件</view>
		<view class="fileSize" v-html="fileSize">文件大小</view>
    </view>
</view>
<script>
export default{
	data(){
		return{
			childrenArr:[],
			isRoot:false,
			children:{},
			fileList:[],
·		}
	},
	created(){
		...获取文件目录数据filelist
		..初始化数据
		this.isRoot = true;
		this.children = filelist;
	},
	methods:{
		openDir(item,index) {
		// 0:目录,1:文件
			if(item.type==0){
					this.childrenArr.push(item);
					this.children = item.children;
					this.isRoot = this.fileList.indexOf(item) > -1 ? true : false;
			}else{
				this.openFile(){
					...打开文件逻辑
				}
			}
		},
		openFile(){
			...打开文件
		},
		back(){
			this.childrenArr.pop();
			this.children = this.childrenArr[this.childrenArr.length-1];
			this.isRoot = this.fileList.indexOf(this.children) > -1 ? true : false;
		}

	}


}


</script>

你可能感兴趣的:(javascript,VUE前端开发,javascript,vue.js,开发语言)