<template>
    <div>
        <div id="input-example">
            <h2>实例演示</h2>
            <ul class="tab">
                <li v-for="(tab,index) in tabItems" @click="tabChange(tab.componentName)" :key="index" :class="{tabSelectd:currentTabName==tab.componentName}" >{{tab.title}}</li>
            </ul>
            <div v-show="currentTabName=='basic'">
                <basic></basic>
            </div>
            <div v-show="currentTabName=='api'">
                <api></api>
            </div>

        </div>
    </div>
</template>
<script>

import basic from './basic.md'
import api from './api.md'

export default {
    data(){
        return {
            tabItems:[{
                title:"基本用法",
                componentName:"basic"
            },{
                title:"api文档",
                componentName:"api"
            }],
            currentTabName:"basic"
        };
    },
    components:{
        "basic":basic,
        "api":api
    },
    methods:{
        tabChange(componentName){
            this.currentTabName=componentName;
        }
    }
}
</script>

<style>

#input-example{
    margin-bottom: 100px;
}

#input-example .tab{
    margin: 0;
    padding: 0;
    margin-bottom: 50px;
}

#input-example .tab li{
    list-style: none;
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

.tabSelectd{
    background-color: orange;
    color: white;
}

.p{
    color: green;
}
.red{
    color: red;
}

</style>

