请使用插槽vm.$slots实现一个导航栏结构

最新推荐文章于 2023-10-27 20:32:32 发布

bug遍地跑

最新推荐文章于 2023-10-27 20:32:32 发布

阅读量2.5k

点赞数 6

分类专栏： vue基础文章标签： css3 css html5 vue

本文链接：https://blog.csdn.net/weixin_47518648/article/details/120959203

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

运行结果如下：

话不多说，直接开整：

样式如下：

    <style>
        #navga{
            top:0;
            left:0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0 5vw;
            height: 70px;
            width: 100%;
            background-color: rgba(65,81,101,0.9);      
        }
        .container
        {
            top:0;
            left:0;
            right: 0;
            width: 100%;
            display: flex;
            
            align-items: center;
        }
        .left{
            width:250px; height:100%;
            flex:none;
        }
        .middle{
            
            height: 100%;
            align-items: center;
            text-align: center;
            
            flex:none;
            
        }
        .right{
            height:100%;
            width: 500px;
            
            flex:none;        
        }
        .logotext
        {
            font-size: 28px;
            font-weight: 600;
            color: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
            
        }
        .logo
        {
            flex: 1;
        }
        .logo img
        {
            width:35px;
            height:35px;
            border-radius: 10px;
            display: inline-table;
            flex: 1;
            vertical-align: center;
        }
        .serch
        {
            height: 30px;
            border-radius: 10px;
            width: 300px;

        }
        ul
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
        }
        li{
            width: 15%;
            flex: 1;
            display: inline;
            align-content: center;
        }
        a 
        {
            text-decoration: none;
            display: inline;
            font-size: 20px;
            font-weight: 300;
            width: 100%;
            color: azure;
            
        }
    </style>

页面结构和js逻辑如下：

<body>
    <div id="app">

        <div id="header">
            <navga id="navga">
                <div class= "container">
                    <div class="left">
                        <div class="logo">
                            <img src="./logo.jpg">
                            <span class="logotext">写bug的猎人</span>
                          </div>
                    </div>
                    <div class="middle">
                        <input type="text" class="serch">
                    </div>
                    <div class="right">
                        <div class="goo">
                            <ul>
                                <li><a href="#">首页</a></li>
                                <li><a href="#">历史记录</a></li>
                                <li><a href="#">消息中心</a></li>
                                <li><a href="#">娱乐中心</a></li>
                                <li><a href="#">关于我们</a></li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </navga>
        </div>

    </div>
    <template id="navigator">
        <div>
            <slot></slot>
        </div>
        
    </template>
    <script>
        Vue.component('navga',{
            template:'#navigator'
        })
        var vm = new Vue({
            el:'#app',
            data:{

            }
        })
    </script>
</body>

如有问题或改进欢迎在留言区评论。

最后，原创不易，点个赞再走哦。

bug遍地跑

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
请使用插槽vm.$slots实现一个导航栏结构

运行结果如下：话不多说，直接开整：样式如下： <style> #navga{ top:0; left:0; right: 0; display: flex; justify-content: space-between; align-items: center; padding:..
复制链接

扫一扫