1.0.0 • Published 2 years ago
mobile-tab-menu v1.0.0
效果图
安装
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:[]} |
1.0.0
2 years ago