Vue Template 规范

<template>
    <div class="layout">
        <layout-side @change="handleChange" :menuList="menuList" />
        <div class="layout-container" v-if="status === 'pass'">
            <layout-header v-if="status === 'pass'" />
            <layout-chrome-nav ref="nav" v-if="isChrome" />
            <layout-nav ref="nav" v-else />
        </div>
    </div>
</template>

<div class="nav-list" ref="list" :style="navListStyle">
    <div class="nav-item"
        v-for="(nav, index) in navList"
        :key="nav.path"
        ref="nav"
        :class="{ active: index === activeIndex }"
        :title="nav | navName"
        @click="handleSelect(nav, index)"
        @contextmenu.prevent="handleContextmenu(nav, index, $event)"
        :draggable="nav.meta.draggable === false ? false : true"
        @dragstart="(e) => handleDragStart(e, nav, index)"
        @dragenter="(e) => handleDragEnter(e, nav, index)"
        @dragend.prevent="handleDragEnd"
        @dragover.prevent
        @dragleave.prevent
    >
        <span>{{ nav | navName }}</span>
        <yt-icon
            v-if="nav.meta.closable !== false"
            class="nav-close"
            icon="el-icon-close"
            @click.stop="handleClose(nav, index)"
        />
    </div>
</div>

├─layout
│      layout-chrome-nav.vue
│      layout-header.vue
│      layout-loading.vue
│      layout-nav.vue
│      layout-side-menu.js
│      layout-side.vue
│      layout.vue
│

<template>
    <div class="layout">
        <layout-side @change="handleChange" :menuList="menuList" />
        <div class="layout-container" v-if="status === 'pass'">
            <layout-header v-if="status === 'pass'" />
            <layout-chrome-nav ref="nav" v-if="isChrome" />
            <layout-nav ref="nav" v-else />
        </div>
    </div>
</template>