
<template>
    <div>
        <div class="box">
            <h-menu type="menu" @click="onChange" v-model="activeKey">
                <h-menu-item v-for="(item,index) in menuData" :key="index" :data="item" :title="item.title"/>
            </h-menu>
            <div class="ccc">你好你好</div>
            <button @click="change">走你</button>
        </div>
        <h-menu @click="onChange" v-model="activeKey" title-active-color="red">
            <h-menu-item v-for="(item,index) in tabData" :key="index" :data="item" :title="item.title">{{item.title}}</h-menu-item>
        </h-menu>
    </div>
</template>

<script>
import { hMenu, hMenuItem } from './index.js';
export default {
    name: "swipe-demo",
    components: {
        hMenu,
        hMenuItem
    },
    data() {
        return {
            activeKey: 16,
            menuData: [],
            tabData: [
                {
                    title: '基本信息',
                    id: 1
                },
                {
                    title: '购买记录',
                    id: 2
                }
            ]
        }
    },
    mounted() {
        this.menuData = [
                {
                    title: '标题名称0',
                    id: 123
                },
                {
                    title: '标题名称1',
                    id: 123
                },
                {
                    title: '标题名称2',
                    id: 123
                },
                {
                    title: '标题名称3',
                    id: 123
                },
                {
                    title: '标题名称4',
                    id: 123
                },
                {
                    title: '标题名称5',
                    id: 123
                },
                {
                    title: '标题名称6',
                    id: 123
                },
                {
                    title: '标题名称7',
                    id: 123
                },
                {
                    title: '标题名称8',
                    id: 123
                },
                {
                    title: '标题名称9',
                    id: 123
                },
                {
                    title: '标题名称10',
                    id: 123
                },
                {
                    title: '标题名称11',
                    id: 123
                },
                {
                    title: '标题名称12',
                    id: 123
                },
                {
                    title: '标题名称13',
                    id: 123
                },
                {
                    title: '标题名称14',
                    id: 123
                },
                {
                    title: '标题名称15',
                    id: 123
                },
                {
                    title: '标题名称16',
                    id: 123
                },
                {
                    title: '标题名称17',
                    id: 123
                },
                {
                    title: '标题名称18',
                    id: 123
                }
            ];
    },
    methods: {
        onChange(index, title, data) {
            console.log('index', index);
            console.log('title', title);
            console.log('data', data);
        },
        change(){
            const index = parseInt(Math.random() * (15 - 0 + 1) + 0, 10);
            console.log( 'index', index );
            this.activeKey = index;
        }
    }
}
</script>
<style>
    .box {
        display: flex;
        height: 400px;
    }
    .ccc {
        width: 280px;
    }
</style>