UI组件

# Nav

# 导航菜单使用演示

# 基本结构

<Nav>
    <NavItem name="home">1</NavItem>
    <SubNav>
        <template v-slot:title>2</template>
        <NavItem>2-1</NavItem>
        <NavItem>2-2</NavItem>
        <SubNav>
            <template v-slot:title>2-3</template>
            <NavItem>2-3-1</NavItem>
            <NavItem>2-3-2</NavItem>
            <SubNav>
                <template v-slot:title>2-3-3</template>
                <NavItem>2-3-3-1</NavItem>
                <NavItem>2-3-3-2</NavItem>
            </SubNav>
        </SubNav>
    </SubNav>
    <NavItem>3</NavItem>
</Nav>

# 1. 横向导航

# 预览:

# 代码:

<g-nav :selected.sync="selected">
    <g-nav-item name="home">首页</g-nav-item>
    <g-sub-nav name="about">
        <template v-slot:title>关于</template>
        <g-nav-item name="culture">企业文化</g-nav-item>
        <g-nav-item name="team">开发团队</g-nav-item>
        <g-sub-nav name="contact">
            <template v-slot:title>联系方式</template>
            <g-nav-item name="qq">qq</g-nav-item>
            <g-nav-item name="wechat">微信</g-nav-item>
            <g-sub-nav name="tel">
                <template v-slot:title>手机</template>
                <g-nav-item name="ct">电信</g-nav-item>
                <g-nav-item name="cu">联通</g-nav-item>
                <g-nav-item name="cm">移动</g-nav-item>
            </g-sub-nav>
        </g-sub-nav>
    </g-sub-nav>
    <g-nav-item name="hire">招聘</g-nav-item>
</g-nav>
<script>
    export default {
        data() {return {selected: 'home'}}
    }
</script>

# 2. 纵向导航

# 预览:

# 代码:

显示代码 
<g-nav :selected.sync="selected" vertical>
    <g-nav-item name="home">首页</g-nav-item>
    <g-sub-nav name="about">
        <template v-slot:title>关于</template>
        <g-nav-item name="culture">企业文化</g-nav-item>
        <g-nav-item name="team">开发团队</g-nav-item>
        <g-sub-nav name="contact">
            <template v-slot:title>联系方式</template>
            <g-nav-item name="qq">qq</g-nav-item>
            <g-nav-item name="wechat">微信</g-nav-item>
            <g-sub-nav name="tel">
                <template v-slot:title>手机</template>
                <g-nav-item name="ct">电信</g-nav-item>
                <g-nav-item name="cu">联通</g-nav-item>
                <g-nav-item name="cm">移动</g-nav-item>
            </g-sub-nav>
        </g-sub-nav>
    </g-sub-nav>
    <g-nav-item name="hire">招聘</g-nav-item>
</g-nav>
<script>
    export default {
        data() {return {selected: 'home'}}
    }
</script>

<style scoped>
    * {margin: 0;padding: 0;box-sizing: border-box;}

    .demo {
        font-size: 14px;
    }
</style>

# 说明

想要Nav变为纵向，只需在Nav上加上vertical。

# API

参数 说明 类型 默认值
selected 选中的元素名称，对应NavItem的name，可以监听。 String 无
vertical 决定导航菜单是否纵向排列。 Boolean false
参数 说明 类型 默认值
name 给该元素命名，对应Nav的selected。 String 无
参数 说明 类型 默认值
name 给该元素命名。 String 无

← Pager 分页 →