正在进入ing...

Vue3高仿Bootstarp4响应式导航栏

发布时间:2020-12-15 浏览量: 1985 文章分类: 前端相关

开始学习Vue后，确实被他快捷的开发速度给吸引了，只要一大堆组件拼凑。一个网站能否快速的成型。 但是我自己在响应式布局这块还是个菜鸡。为了能方便实现响应式网站，一般我还是比较喜欢使用栅格系统。 所以一直在研究怎么能有效的将bootstarp的响应式导航菜单给挪到Vue上使用。

我的Vue版本还是2的，css用的是stylus。 先看看 实现的效果

Vue3高仿Bootstarp4响应式导航栏

是不是看起来还挺像Bootstarp4的导航栏。

首先先说说，我用到了bootstarp4的栅格布局，关于这块，可以看我的另外一篇文章Vue3Cli中引入BootStarp4的响应式布局组件 然后在定义一个BlogHeader.vue的组件。

Template内容

    <div class="container-fluid">
        <header class="container">
            <div class="row">
                <div class="header-logo-container col-8 col-md-3">
                    <a href="#" class="header-logo">
                        <img src="https://www.wuyabala.com/static/img/logo.jpg" alt="">
                        <h1>佩恩的博客</h1>
                    </a>
                </div>
                <div class="header-btn-container col-4 d-md-none">
                    <button type="button" class="btn-toggle" @click="mobileMenuBtn">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <div class="header-nav-container col-md-9 d-none d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item"><a class="header-nav-link" href="">首页</a></li>
                        <li class="header-nav-item"><a class="header-nav-link" href="">关于我</a></li>
                        <li class="header-nav-item"><a class="header-nav-link" href="">其他</a></li>
                    </ul>
                </div>
            </div>
        </header>

        <nav :class="['nav-container','d-md-none',[mobileMenuClass?'nav-container-extended':'']]">
            <ul class="container">
                <li><a href="###" class="nav-link">首页</a></li>
                <li><a href="###" class="nav-link">关于我</a></li>
                <li><a href="###" class="nav-link">其他</a></li>
            </ul>
        </nav>
    </div>

这里就是常规的布局，将网页分为了3个区域 + logo-container存放logo和网站标题 + header-btn-container 移动端显示，就是显示一个按钮区域 + header-nav-container pc端显示，显示正常的横排菜单

  • nav-container 移动端下拉菜单的样式区域

需要注意的就是，在移动端的header-btn-container下的button增加了@click="mobileMenuBtn"一个点击事件 在最下面的nav的class里面增加了一个动态绑定的显示类，用来控制移动端菜单的显示和隐藏

script 区域

export default {
    name: "BlogHeader",
    data:function(){
        return {
            mobileMenuClass :false
        }
    },
    methods:{
        mobileMenuBtn(){
            this.mobileMenuClass = !this.mobileMenuClass;
            console.log(this.mobileMenuClass)
        }
    }
};

这里没什么好说的，定义了一个变量mobileMenuClass，用来存放移动端菜单是展开还是收起，结合上面的类样式绑定可以做出展开或首回的操作。 下面定义了mobileMenuBtn方法，用来处理点击操作。

css(stylus)

因为我用的是 stylus所以写的语法也是用stylus写的，基本没太大区别

.container-fluid
    height 60px
    background linear-gradient(#0984e3,#74b9ff)
    .header-logo-container
        height 60px
        display flex
        justify-content flex-start
        align-content center
        // logo区域
        .header-logo
            height 60px
            display flex
            align-items center
            justify-content center
            img
                height 50px
                width 50px
                border-radius 50%
            h1
                font-size 1.5rem
                margin-left 20px
                color #fff
    .header-nav-container
        // PC导航菜单
        height  60px

        .header-nav
            height 100%
            display flex
            justify-content flex-end
            font-size 1.2rem
            .header-nav-item
                height 100%
                margin-left 24px
                .header-nav-link
                    height 100%
                    display flex
                    align-items center
                    justify-content center
                    font-weight bold
                    color  #fff
            .header-nav-item:first-child
                margin-left 0


    .header-btn-container
        // 移动端的右侧按钮样式
        height 60px
        display flex
        align-items center
        justify-content flex-end
        .btn-toggle
            padding 10px
            background-color transparent
            border none
            border-radius 4px
            cursor pointer
            .btn-toggle-bar
                display block
                width 24px
                height 4px
                background-color #363636
                border-radius 2px
            .btn-toggle-bar + .btn-toggle-bar
                margin-top 4px
        .btn-toggle:hover
            background-color #f9f9f9
        .btn-toggle:hover .btn-toggle-bar
            background-color #1428a0

// 移动导航菜单
.nav-container
    height 0
    overflow hidden
    position relative
    top -1px
    border-bottom 1px solid #dadada
    transition height .5s
    .nav-link
        display block
        height 40px
        line-height 40px
        font-weight bold
        color #363636

// 菜单展开的样式每个 40px + 一像素的边框
.nav-container-extended
    top 0
    height 121px
    background-color #ccc
    z-index 2