vue 移动端顶部导航组件

废话不多说，下面是我自己写的vue移动端顶部导航组件给大家分享一下 ，动态绑定背景颜色，字体颜色，以及回退图标。需要的直接拿去放项目里用吧～

示例图：

HTML

<template>
  <div class="appraisalTooBar" :style="{background:bgColor, opacity:bgOpacity}">
   <div class="left_box"  @click="backApp()">
     <img class="appraisal_img" :src="ImgSrc" alt=""/>
   </div>
    <p class="appraisal_title" :style="{color:titleColoe}">{
         
  {title}}</p>
    <div class="appraisal_text"
         @click="handleShare"
         :style="{color:rightTextColor}">{
         
  {rightText}}</div>
  </div>
</template>

JS

CSS

<style lang="stylus" rel="stylesheet/stylus">

  .appraisalTooBar
    position: fixed;
    display flex
    width: 100%;
    top: 0px;
    align-items: center;
    z-index: 100;
    height 1.2733rem
    width 100%
    font-size 0.48rem
    .appraisal_img
      padding 0 0.24rem
      width 0.64rem
      height 0.64rem
      vertical-align middle

    .appraisal_title
      margin auto
      font-size 0.53rem
      padding-right 1.2rem
    .appraisal_text
      position absolute
      padding 0.08rem
      right 0.24rem;
      font-size 0.4rem
</style>

好啦，整个组件就这些代码，其中有些地方不需要的自己删除啊，可以删除的我都写清楚了/有需要私信给我即可！

下面是使用组件的方法也就是哪个页面需要就引用传相应的参数：看代码

HTML

<template>
 <!--
 第三步： 使用组件  并且定义 ref属性通过ref 属性给子组件传递参数 
 shareData 这里是我定义分享方法，通过这个方法给子组件传值不需要的删除即可
 -->
  <appraisalbar ref="personBar" :shareData="shareData"></appraisalbar>
</template>

JS

好啦。整个顶部导航已完毕，觉得有用就拿去直接用吧，按照自己需求改一下参数和方法名，还有需要了解更多的小知识，进这个网站吧