vue 移动端顶部导航组件

最新推荐文章于 2024-08-20 09:25:03 发布

赵小懒猪cium

最新推荐文章于 2024-08-20 09:25:03 发布

阅读量5.3k

点赞数 1

分类专栏： vue 移动端文章标签： vue 移动端顶部导航组件

本文链接：https://blog.csdn.net/YY110621/article/details/82892018

版权

本文分享了一款Vue编写的移动端顶部导航组件，具备动态绑定背景色、文字色和回退图标功能。提供了组件代码示例及使用方法，适用于需要快速集成顶部导航的项目。

摘要由CSDN通过智能技术生成

废话不多说，下面是我自己写的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>

<script>
//因为回退键是需要判断是在什么端会回退到哪一层，所以需要引入我之前封装好的验证工具类，不知道的可以看上一片博客，直接拿去用。
[验证不同设备的工具类封装](https://mp.csdn.net/postedit/82889807)
  import {method} from '../../router/numberUtil' //适配不同移动端设备工具类
  export default {
    name: "appraisalbar",