NavBar-顶部标题栏

1.引入

import { NavBar ,Icon} from 'vant';
Vue.use(NavBar);//顶部标题
Vue.use(Icon );//引进图标

2.使用

• title：标题名设置

• left-text:左边文字

• left-arrow: 左边出现箭头

• flxed：固定头部

 <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
    <!-- 右边自定义插槽 -->
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

methods:{
    // 顶部标题栏左边事件设置
    onClickLeft(){
      console.log('操作左边');
    },
    // 顶部标题栏右边事件设置
    onClickRight(){
      console.log('操作右边');
      
    }
  }

3.相关样式

/*背景颜色*/
.van-nav-bar {
  background-color: red;
  z-index: 999;
}
/*文字颜色*/
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white;
}