Vue 选项卡封装

JSON_L

于 2025-07-25 15:38:48 发布

阅读量245

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 # Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/149639927

前端同时被 2 个专栏收录

67 篇文章

订阅专栏

Vue

46 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：选项卡封装

选项卡封装

创建组件

在mycomponents中创建TabBar.vue文件：

组件内容

然后把选项卡内容包含在template标签中。

示例如下：

<template>
  <div>
    <!-- 声明式导航 （3之前 包含3） -->
    <!-- <ul>
      <li>
        <router-link to="films" active-class="testActive" tag="li">电影</router-link>
      </li>
      <li>
        <router-link to="cinemas">影院</router-link>
      </li>
      <li>
        <router-link to="center">我的</router-link>
      </li>
    </ul> -->

    <!-- 版本4 导航 -->
    <ul>
        <router-link to="films" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">电影</li>
        </router-link>
        <router-link to="cinemas" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">影院</li>
        </router-link>
        <router-link to="center" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'testActive':''">我的</li>
        </router-link>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>

</style>

使用组件

引入组件

在app.vue中引入组件。

示例如下：

<template>
  <div>
    <tabbar></tabbar>
    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
import tabbar from '@/mycomponents/TabBar'

注册组件

在app.vue页面中注册tabbar组件。

示例如下：

export default {
  data () {
    return {}
  },
  components: {
    tabbar
  }
}

组件增加样式

在选项卡组件中增加footer标签包含选项卡内容，然后设置选项卡样式

Height是通过49px转化的rem值，用上面rem计算公式换算。

示例如下：

<style lang="scss" scoped>
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.722222rem;
    background: white;
    ul {
        display: flex;
        li {
            flex: 1;
            line-height: 2.722222rem;
            text-align: center;
        }
    }
}
</style>

公共样式

App.vue中公共样式

<style lang="scss">
*{
  margin:0;
  padding:0;
}
html, body {
  height:100%;
}
ul {
  list-style: none;
}
.tabActive {
  color:red;
}
</style>

选项卡图标

下载图标

需要下载iconfonts 从阿里的矢量图中下载。

选择官方图标库

找到图标，然后选择加入购物车

在购物车中选择创建项目和把图标加入项目

购物车中选择font class，然后下载到本地

最后解压缩后，就是我们要的文件：

在浏览器中访问demo.index.html

图标加入项目

在项目public下创建iconfont文件夹，然后把图标文件放进去，如下：

引入图标

在public/index.html中引入样式。

示例如下：

设置图标

在TabBar.vue组件的选项卡上设置图标。

示例如下：

<template>
  <footer>
    <!-- 版本4 导航 -->
    <ul>
        <router-link to="/films" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'tabActive':''"><i class="icon iconfont">&#xe8ba;</i>
          <span>电影</span>
          </li>
        </router-link>
        <router-link to="/cinemas" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'tabActive':''"><i class="icon iconfont">&#xe90a;</i>
          <span>影院</span>
          </li>
        </router-link>
        <router-link to="/center" custom v-slot="{navigate, isActive}">
          <li @click="navigate" :class="isActive?'tabActive':''"><i class="icon iconfont">&#xe8f8;</i>
          <span>我的</span>
          </li>
        </router-link>
    </ul>
  </footer>
</template>

另一种引入方式

放入assets

把图标文件夹放入src/assets中。

模块化引入图标

在tabBar.vue中使用import通过相对路径引入。

示例如下：

修改li样式

修改TabBar.vue中底部导航栏li的样式。

示例如下：

<style lang="scss" scoped>
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.7222rem;
    background: white;
    ul {
        display: flex;
        li {
            flex: 1;
            line-height: 1.3888889rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            i {
              font-size: 21px;
            }
            span {
              font-size: 10px;
            }
        }
    }
}
</style>