Vue 自定义菜单、tabBar效果

1、HTML
html 复制代码
<template>
  <div class="test">
    <!-- 菜单 -->
    <ul>
      <li
        v-for="item in menuList"
        :key="item.id"
        :class="isActive == item.id ? 'isActive' : ''"
        @click="clickMenu(item.id)">
        <span>{{ item.label }}</span>
      </li>
    </ul>

    <!-- 内容 -->
    <div>
      <router-view />
    </div>
  </div>
</template>
2、Script
javascript 复制代码
<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      menuList: [
        {
          id: 1,
          label: "首页",
          path: "/home",
        },
        {
          id: 2,
          label: "分类",
          path: "/home",
        },
        {
          id: 3,
          label: "商城",
          path: "/home",
        },
        {
          id: 4,
          label: "推荐",
          path: "/home",
        },
        {
          id: 5,
          label: "喜欢",
          path: "/home",
        },
      ],

      isActive: 1, // 选中id,默认选中id为1的菜单
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    clickMenu(id) {
      this.isActive = id;
    },
  },
};
</script>
3、Css
css 复制代码
<style lang="less" scoped>
.test {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  ul {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      width: 6%;
      height: 100%;
      margin: 0px 10px;
      border: 1px solid #24724f;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;

      // hover样式
      &:hover {
        background-color: #24724f;
        color: #fff;
      }
    }

    // 选中样式
    .isActive {
      background-color: #24724f;
      color: #fff;
    }
  }
}
</style>
相关推荐
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情1 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz1 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258591 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1234 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜054 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界4 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子4 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
Hilaku4 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery