TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vant导航栏定制

zyz
2021-04-06
/
0 评论
/
40 阅读
/
正在检测是否收录...
04/06

一、Vant导航栏组件

Vant组件库中,有给我们提供了一个导航栏组件,所以我们可以直接使用已经封装好的组件。

# App.vue组件中
<template>
    # 组件使用
    <van-nav-bar
        :title="title"
    />
</template>

<script>
    # 导入需要使用的组件
    import { NavBar } from 'vant';
    
    export default{
        name: 'navBar',
        components:{    # 组件声明
            [NavBar.name]:NavBar
        },
        data() {
            return {
                title: '全视眼镜商城'
            }
        },
    }
</script>

二、导航栏样式说明

首页中导航栏是显示的,分类中也是显示的,搜索中是不显示的,购物车中是显示的,我的是不显示的,而且在对应的每个页面中,显示的文字内容是会不一样的。

三、导航栏定制

Vant组件库中,只是给我们提供了一个显示样式,但我们在项目中,每个页面显示会不一样,那么我们需要在页面切换时,进行调整。

注意组件的问题: 导航栏在添加在App.vue中的,而导航栏中需要显示什么内容,到导航栏是否要显示,是在切换组件时涉及到的。

即可以在每个子组件中HomeViewAssortViewSearchViewCartViewMineView中设置显示内容,以及到导航栏显示与否。在页面切换时候告诉父组件即可,这就会涉及到子组件 传值给 父组件,实现方式是自定义事件

  • 显示样式定制(在浏览器中查看元素,找到对应的元素名称)

    <style>
    .van-nav-bar{
        height: 2.8125rem;
        background: red;
        font-size: 1rem;
        font-weight: 700;
        line-height: 2.8125rem;
        text-align: center;
    }
    .van-nav-bar .van-nav-bar__title{
        color: white;
    }
    </style>
  • 父组件App.vue属性和方法定义

    <script>
    import {
        NavBar,
    } from 'vant';
    
    export default {
        name: 'app',
        components: {
            [NavBar.name]:NavBar
        },
        data() {
            return {
                title: '',    // 导航标题(子组件传递过来)
                navViewShow: true,// 导航显示或隐藏
            }
        },
        methods:{
            getTitle: function(title){   // 获取到的标题
                this.title = title
            },
            getShow: function(temp){    // 获取到导航的显示隐藏
                this.navViewShow = temp
            }
        }
    }
    </script>
  • 父组件App.vue模板中显示控制 【因为子组件渲染位置是在router-view中】

    <template>
    <div id="app">
        <!-- 导航标题,以及显示与否绑定 -->
        <van-nav-bar
            :title="title"
            fixed
            v-show='navViewShow'
        />
    
        <!-- 添加两个自定义事件 -->
        <router-view @onTitle='getTitle' @onNavShow='getShow'></router-view>
    </div>
    </template>
  • 子组件 【以HomeView.vue组件为例】

    <script>
    export default{
        name:'homeView',
        data() {
            return {
                title: '全视眼镜商城',
                navViewShow: true
            }
        },
        created() {    // 这会涉及到组件的生命周期问题【实例已经创建完成之后被调用】
            this.$emit('onTitle', this.title)    // 触发事件,发送标题显示内容
            this.$emit('onNavShow', this.navViewShow)    // 触发事件,发送导航栏显示或隐藏
        }
    }
    </script>
赞(0)
评论 (0)