vue手机端菜单页

效果图

安装

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:[]}