Vue封装树形菜单组件

╰半橙微兮° 2022-05-20 09:24 284阅读 0赞

csdn终于更新完成了哈，ok，步入正题

像这种树形结构的核心思想就是：递归思想，知道使用递归，其实这个例子函数的封装也就很简单喽

实现步骤：

设置的props：  
                        data 数据结构 默认为 \[\]

定制模板:  
                        不可定制

监控状态变化：  
                        事件名on-select-change 点击树节点触发

使用：在需要的地方插入形如下面的代码，

<m-tree :data="treeList"></m-tree>

你的数据结构应该是下面的类型：  
                    传入的数据结构：  
                        \[  
                        \{  
                            title:XXX,  
                            children:\[  
                                \{  
                                    title:XXXX,  
                                    chidren:\[\]  
                                \}  
                            \]  
                        \}\]

如下示例：

var data = [{
            title: "目录",
            chidren: [{
                title: "我的音乐",
                chidren: [{
                    title: "周杰伦",
                    chidren: [{
                        title: "发如雪"
                    }]
                }, {
                    title: "王杰",
                    chidren: [{
                        title: "一场游戏一场梦"
                    }]
                }]
            }, {
                title: "我的照片"
            }]
        }];

利用vue封装了一个树形菜单组件，效果图如下：

![70][]

<!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            .tree-menu {
                width: 360px;
                height: 100%;
                padding: 0px 12px;
                border-right: 1px solid #e6e9f0;
            }
    
            .tree-menu-comm span {
                display: block;
                font-size: 12px;
                position: relative;
            }
    
            .tree-contro .ico {
                background-position: 3px -92px;
            }
    
            .tree-title .ico {
                position: absolute;
                left: -13px;
                top: 0;
                width: 15px;
                height: 26px;
                background: url(./folder-tree.png) no-repeat 4px -43px;
                opacity: 0.8;
            }
    
            .tree-menu-comm span strong {
                display: block;
                width: 82%;
                position: relative;
                line-height: 22px;
                padding: 2px 0;
                padding-left: 5px;
                color: #161719;
                font-weight: normal;
            }
    
            .tree-nav {
                background: #e7f2fe;
                border: 1px solid #bfdaf4;
                padding-left: 14px;
                margin-left: 0px;
            }
    
            .tree-title {
                border: 1px solid #fff;
                margin-top: 1px;
            }
            /*无箭头*/
    
            .tree-contro-none .ico {
                background-position: -999px -99px;
            }
            /*箭头朝下*/
    
            .tree-contro .ico {
                background-position: 3px -92px;
            }
        </style>
        <script src="../vue.js"></script>
        <script>
        </script>
    </head>
    
    <body>
    <div id="app">
           <j-costum :data="treeList"></j-costum>
    </div>
    <script>
        var data = [{
            title: "目录",
            chidren: [{
                title: "我的音乐",
                chidren: [{
                    title: "周杰伦",
                    chidren: [{
                        title: "发如雪"
                    }]
                }, {
                    title: "王杰",
                    chidren: [{
                        title: "一场游戏一场梦"
                    }]
                }]
            }, {
                title: "我的照片"
            }]
        }];
    Vue.component("j-tree-list",{
        computed:{
            count(){
                var c = this.increment;
                return ++c;
            },
            stylePadding(){
                return {
                    'padding-left':this.count * 16 + 'px'
                }
            }
        },
        props:{
            data:{
                type:Array,
                default:[]
            },
            increment:{
                type:Number,
                default:0
            }
        },
        data:function(){
           return {
               fold:true
           }
        },
        template:`
        <ul>
                <li v-for="item in data">
                   <div class="tree-title" :style="stylePadding">
                    <span>
                      <strong>{
       {item.title}}</strong>
                      <i class="ico"
                      @click="foldFn(item)"
                      ></i>
                    </span>
                   </div>
                   <j-tree-list
                   :increment="count"
                   v-if="item.chidren"
                   v-show="fold"
                   :data="item.chidren"></j-tree-list>
                </li>
            </ul>
        `,
        methods:{
            foldFn(item){
                this.fold = !this.fold;
            }
        }
    })
    
        Vue.component("j-costum",{
            props:{
                data:{
                    type:Array,
                    default:[]
                }
            },
            template:`
        <div class="tree-menu-comm tree-menu">
            <j-tree-list :data="data"></j-tree-list>
        </div>
            `
        })
        var vm = new Vue({
            el:"#app",
            data:{
                treeList:data
            }
        });
    
    </script>
    </body>
    
    </html>

[70]: /images/20220520/509ddadd3f634dde867df5d7f124d93b.png