vue实现树形标题（组件自递归）

最新推荐文章于 2024-09-21 11:10:30 发布

原创最新推荐文章于 2024-09-21 11:10:30 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

JsCssDemo 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用Vue实现树形标题的功能，重点在于组件的递归调用和通过props传递参数来定制标题样式。

被问道了，当时只是简单设计了一下，type等都没加上，重新实现了一下。

效果

在这里插入图片描述

// 数据结构
nodes: [
                    {
                        label: 'title 1',
                        content: 'hello world',
                        children: [
                            {
                                label: 'title 1-1',
                                content: 'hello world content',
                                children: [
                                    {
                                        label: 'title 1-1-1',
                                        content: 'hello world content',
                                        children: []
                                    },
                                    {
                                        label: 'title 1-1-2',
                                        content: 'hello world content',
                                        children: []
                                    }
                                ]
                            },
                            {
                                label: 'title 1-2',
                                content: 'hello world content',
                                children: [
                                    {
                                        label: 'title 1-2-1',
                                        content: 'hello world content',
                                        children: []
                                    },
                                ]
                            },
                            {
                                label: 'title 1-3',
                                content: 'hello world content',
                                children: []
                            }
                        ]
                    },
                    {
                        label: 'title 2',
                        content: 'hello world',
                        children: [
                            {
                                label: 'title 2-1',
                                content: 'hello world content',
                                children: []
                            },
                            {
                                label: 'title 2-2',
                                content: 'hello world content',
                                children: [
                                    {
                                        label: 'title 2-2-1',
                                        content: 'hello world content',
                                        children: []
                                    },
                                    {
                                        label: 'title 2-2-2',
                                        content: 'hello world content',
                                        children: [
                                            {
                                                label: 'title 2-2-2-1',
                                                content: 'hello world content',
                                                children:[]
                                            }
                                        ]
                                    }
                                ]
                            },

                        ]
                    }, {
                        label: 'title 3',
                        content: 'hello world',
                        children: []
                    }
                ]

实现

重点就是组件递归。简单的props传参。在根据传参调整标题样式。
组件设计如下：

    <script type="text/x-template" id='title'>
        <div v-if="nodes.length > 0">
            <div v-for="node in nodes" :style="strong">
                {{node.label}}
                <p :style="content">{{node.content}}</p>
                <comp-title :nodes="node.children" :type="type + 1"></comp-title>
            </div>
        </div>
    </script>

	Vue.component('comp-title', {
            template: '#title',
            props: {
                nodes: {
                    type: Array,
                    default: []
                },
                type: {
                    type: Number,
                    default: 1
                }
            },
            data() {
                return {}
            },
            computed: {
                strong() {
                    let color = this.type * 1.5;
                    if (color >= 10) color = '#aaa';
                    else color = `#${color}${color}${color}`;
                    return {
                        'font-Size': (36 - 3 * this.type) + 'px',
                        'color': color,
                        'text-indent': (this.type - 1) + 'em'
                    }
                },
                content() {
                    return {
                        'font-Size': '16px',
                        'color': '#3e3e3e',
                    }
                }
            },
            mounted() {
                console.log(this.type);
            }
        });