标签：vue 已办 业务 value label 菜单 手机 children icon
效果图
安装
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:[]} |
标签：vue,已办,业务,value,label,菜单,手机,children,icon 来源： https://www.cnblogs.com/xyqbk/p/16348639.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。