效果图

安装

npm i mobile-tab-menu

使用

<!--
 * @Descripttion: 使用示例
 * @Author: xuyanqi
 * @Date: 2022-06-01 17:30:58
-->
<template>
  <div class="index">
    <mobileTabMenu :menuData="menuData" :historys="historys" :historysShow="true" historysText="访问历史" @tabHandler="tabHandler" @menuHandler="menuHandler"></mobileTabMenu>
  </div>
</template>

<script>
import mobileTabMenu from 'mobile-tab-menu'
export default {
  components: {
    mobileTabMenu,
  },
  data() {
    return {
      historys: [
        {
          label: '我的保单',
          value: 1,
          icon: '',
        },
        {
          label: '保险业务',
          value: 1,
          icon: '',
        },
        {
          label: '已办业务',
          value: 1,
          icon: '',
        },
        {
          label: '已办业务',
          value: 1,
          icon: '',
        },
      ],
      menuData: [
        {
          label: '信息发布',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
        {
          label: '业务汇报',
          children: [
            {
              label: '我的保单',
              value: 1,
              icon: '',
            },
            {
              label: '保险业务',
              value: 1,
              icon: '',
            },
            {
              label: '已办业务',
              value: 1,
              icon: '',
            },
          ],
        },
      ],
    }
  },
  methods: {
    tabHandler(e) {
      console.log(e)
    },
    menuHandler(e) {
      console.log(e)
    },
  },
}
</script>

<style scoped>
.index {
  height: 100%;
}
</style>

props

| 属性 | 是否必填 | 说明 | 数据类型 | 数据结构 | | :----------: | :------: | :--------------: | :------: | :--------------------------------------------------------------: | | menuData | 是 | 菜单列表 | array | [{label: '',children: []}] | | historysShow | 否 | 是否显示历史记录 | Boolean | false | | historys | 否 | 历史记录列表 | array | [{label: '',children: []}]；访问过的菜单会存储到 localStorage 中 | | historysText | 否 | 历史记录标题 | String | 访问历史 |

events

| 事件 | 说明 | 返回值 | | :---------: | :--------------: | :-----------------------------: | | tabHandler | tab 导航点击触发 | object：{label: '',children:[]} | | menuHandler | 按钮点击触发 | object：{label: '',children:[]} |