zyz
Vant导航栏定制
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
中的,而导航栏中需要显示什么内容,到导航栏是否要显示,是在切换组件时涉及到的。
即可以在每个子组件中HomeView
、AssortView
、SearchView
、CartView
、MineView
中设置显示内容,以及到导航栏显示与否。在页面切换时候告诉父组件即可,这就会涉及到子组件 传值给 父组件
,实现方式是自定义事件
。
显示样式定制(在浏览器中查看元素,找到对应的元素名称)
<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>