Nuxt3初探(四)——layouts的使用
2023-04-18 14:44:31 时间
- 基本概念
- layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定
- 使用该约定需要在根目录下创建layouts文件夹,并在里面创建.vue文件用来作为布局模板。如果需要创建多个模板,在layouts中创建多个.vue文件即可
- 在layouts中创建的.vue文件可以看做是一个容器,我们需要使用
<slot name="header-box"/>
插槽来存放页面相应位置的填充内容 <NuxtLayout/>
标签是可以个通用的布局标签,可以看做我们创建的布局容器,可以<NuxtLayout name="xxx"/>
通过指定name
属性布局模板文件名的方式指定布局模板- 在
<NuxtLayout/>
标签中使用<template #header-box>
来为当前内容指定放置的布局位置。
- 实践练习
- 目标:实现一个类似vitepress文档页面的两栏布局
- 目录结构:
- custom.vue:
<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>
复制代码
- layout-test/index.vue:
<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/>
- Point
- 在Layouts中创建的default.vue会作为一个全局默认的布局模板
- 使用
<NuxtLayout>
标签时需要将当前页面的layout
设置为false,使用这种方式同时需要使用setup
时则需要额外创建一个<script setup>
- 当程序只有一种布局时,甚至可以直接在app.vue中创建布局
相关文章
- 肖亚庆:推动5G、AI等新技术与制造业深度融合
- 区块链:元宇宙的“基础设施”
- 有哪些被大家所熟知的云计算误区?
- LeetCode 面试题 17.14. 最小K个数
- 区块链与云计算
- 江湖再无Facebook
- IT团队放弃DIY SD-WAN 转向托管混合模型
- LeetCode 1828. 统计一个圆中点的数目
- 开源对于云原生至关重要的5个原因
- LeetCode 1689. 十-二进制数的最少数目
- 中国信通院洪坤贤:混合云形态持续演进,四大能力成为关键
- Http Header中到底有些啥?
- LeetCode 1684. 统计一致字符串的数目
- 项目版本管理的优秀实践:云效飞流Flow篇
- LeetCode 1266. 访问所有点的最小时间
- Github 无法显示图片的问题终极解决方案
- 航天科工南京壹进制张有成:云化与服务化的转型可以依托信服云底座
- 如何使用AWS Spot实例将云计算成本降低90%
- 运营商对5G套餐设不同网速:有的竟不如4G时期
- LeetCode 1342. 将数字变成 0 的操作次数