目录结构点击下一级，返回上一级类似网盘形式

最新推荐文章于 2023-04-25 15:58:19 发布

AF01

最新推荐文章于 2023-04-25 15:58:19 发布

阅读量480

点赞数

分类专栏： vue 文章标签： css html css3

本文链接：https://blog.csdn.net/songJunFeng1/article/details/120967697

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

类似网盘形式的上一级下一级文件


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目录结构点击下一级，返回上一级</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
		.last {
			color: aqua;
			cursor: pointer;
		}
		.itemcss{
			margin: 10px 20px;
			cursor: pointer;
		}
    </style>
</head>

<body>
    <div id="app">
          <div class="hello">
            <div>
              <div @click="clickOut()" class="last"><i v-if="historyList.length>0" class="el-icon-back"></i>{{historyList.length>0?"返回上一级":"目录"}}</div>
              <div v-for="i in showData" :key="i.id">
                <div class="itemcss" @click="clickIn(i)">
                  {{i.label}}
                </div>
              </div>
            </div>
          </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
				listData:[],
				showData:[],
				historyList:[]
			},
            computed: {},
            methods: {
				 clickIn(i){
				    console.log(i);
				    if(i.children&&i.children.length>0){
				      this.historyList.push(this.showData);
				      this.showData = i.children;
				      console.log(this.historyList);
				    }
				  },
				  clickOut(){
					 if(this.historyList&&this.historyList.length>0){
						 this.showData =this.historyList[this.historyList.length-1]
						 this.historyList.pop()
						 console.log(this.historyList);
					 }
				  }
			},
            beforeMount() {},
            mounted() {
                  this.listData = [
                              {
                                  "id": 1, 
                                  "label": "文件夹1-------点击进入下一级", 
                                  "children": [
                                      {
                                          "id": 101, 
                                          "label": "文件夹----点击进入下一级",
                                          "children":[
                                            {
                                              "id": 1001, 
                                              "label": "文件-----1001",
                                            }
                                          ]
                                      }, 
                                      {
                                          "id": 102, 
                                          "label": "文件102"
                                      }, 
                                      {
                                          "id": 103, 
                                          "label": "文件103"
                                      }
                                  ]
                              }, 
                              {
                                  "id": 2, 
                                  "label": "文件2"
                              }, 
                              {
                                  "id": 3, 
                                  "label": "文件3"
                              }, 
                              {
                                  "id": 4, 
                                  "label": "文件4"
                              }, 
                              {
                                  "id": 5, 
                                  "label": "文件5"
                              }
                          ]
                   this.showData = this.listData
            }
        })
    </script>
</body>

</html>

AF01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
目录结构点击下一级，返回上一级类似网盘形式

类似网盘形式的上一级下一级文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
复制链接

扫一扫

专栏目录