<slot name="header-box"/>
插槽来存放页面相应位置的填充内容<NuxtLayout/>
标签是可以个通用的布局标签,可以看做我们创建的布局容器,可以<NuxtLayout name="xxx"/>
通过指定name
属性布局模板文件名的方式指定布局模板<NuxtLayout/>
标签中使用<template #header-box>
来为当前内容指定放置的布局位置。 <template>
<div class="page-box">
<div class="header-box">
<slot name="header-box"/>
</div>
<div class="body-box">
<div class="left-sider">
<slot name="left-sider"/>
</div>
<div class="body-content">
<slot name="body-content"/>
</div>
</div>
</div>
</template>
<style>
.page-box {
display: flex;
flex-direction: column;
}
.header-box {
width: 100%;
height: 100px;
display: flex;
background-color: red;
}
.body-box {
width: 100%;
display: flex;
flex-flow: row;
}
.left-sider {
width: 400px;
height: calc(100vh - 100px);
background: yellow;
overflow: auto;
}
.body-content {
flex: 1;
height: calc(100vh - 100px);
background-color: blue;
overflow: auto;
}
.sider-content {
height: 1300px;
width: 200px;
background-color: black;
}
</style>
复制代码
<template>
<NuxtLayout name='custom'>
<template #header-box>
<div>首页</div>
<div>关于</div>
</template>
<template #left-sider>
<div>快速入门</div>
<div>使用</div>
<div>目录结构</div>
</template>
<template #body-content>
<div>我应该显示一点内容</div>
</template>
</NuxtLayout>
</template>
<script>
export default {
layout: false
}
</script>
复制代码
pages/index.vue
中有一个跳转至layout-test/index.vue
的<NuxtLink/>
<NuxtLayout>
标签时需要将当前页面的layout
设置为false,使用这种方式同时需要使用setup
时则需要额外创建一个<script setup>
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。