备赛蓝桥杯之第十六届模拟赛2期职业院校组第六题：菜谱教程
提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：备赛蓝桥杯之第十六届模拟赛2期职业院校组第六题：菜谱教程
题目：
经过运行环境运行之后的效果如下：
本题需要做的代码如下：
/** TODO 1 START 请在下面补充代码 **/
/** TODO 1 END **/export default {
template: `
<!-- TODO 2 START 请在下面补充代码 -->
<!-- TODO 2 END -->
<!-- TODO 3 START 请在下面补充代码 -->
<!-- TODO 3 END -->
`
}本题目标如下：
请在
js/index.js、components/App.js这两个文件中补充代码，具体要求如下：
- 请在
js/index.js中TODO1处完成 ElementPlus 插件注册。- 请在
components/App.js中TODO2处补全代码，添加 ElementPlus Steps 步骤条组件，用以显示菜谱中的制作步骤。
- 步骤条需要垂直放置。
- 步骤条的
active属性值需要绑定为currentStep变量。- 请遍历菜谱步骤数组
cookbook.steps生成步骤条中的每一个步骤，格式如下：<el-steps> <el-step title="step 1"></el-step> <el-step title="step 2"></el-step> <el-step title="step 3"></el-step> </el-steps>cookbook.steps数组中项的格式为：{ "title": "", // 步骤标题，需要显示在步骤条组件的相应步骤上 "content": "" // 步骤内容描述 },- 用到变量说明如下：
名称 说明 类型 currentStep当前显示的步骤序号 Ref<number>stepCount菜谱中操作步骤的总数 ComputedRef<number>- 实现功能所需的
el-steps组件 api 如下：
参数 说明 类型 默认值 direction 显示方向 enum('vertical'、'horizontal')horizontalactive 设置当前激活步骤 number0- 实现功能所需的
el-step组件 api 如下：
参数 说明 类型 默认值 title 标题 string
- 请在
components/App.js中TODO3处补全代码，添加 ElementPlus Result 结果组件，提示用户学习完成。
- 此组件仅在
currentStep >= stepCount条件满足时显示，为此组件设置以下内容：
- 需要设置
class为completed-tutorial。- 显示图标为
success，标题内容为已完成，副标题为恭喜你，完成了所有步骤，快尝尝自己亲手做的菜吧！。- 在
extra插槽中放置一个按钮，具体内容为：<el-button type="primary" @click="currentStep = 0">从头开始</el-button>- 实现功能所需的
el-result组件 api 如下：
参数 说明 类型 默认值 icon result 组件的图标类型 enum('success'、'warning'、'info'、'error')infotitle result 组件的标题 stringsub-title result 组件的副标题 string使用示例：
<el-result icon="success" title="已完成" sub-title="恭喜你已完成！">
说人话：
就是使用题目中给出的属性，再加上一点点自己的理解填上属性即可
本题作者想说
答案：
/** TODO 1 START 请在下面补充代码 **/
app.use(ElementPlus)
/** TODO 1 END **/
export default {
template: `
<!-- TODO 2 START 请在下面补充代码 -->
<el-steps :active="currentStep" direction="vertical">
<el-step v-for="(item,index) in cookbook.steps" :key="index" :title="item.title"></el-step>
</el-steps>
<!-- TODO 2 END -->
<!-- TODO 3 START 请在下面补充代码 -->
<div v-show="currentStep >= stepCount" class="completed-tutorial" >
<el-result
icon="success"
title="已完成"
sub-title=" 恭喜你，完成了所有步骤，快尝尝自己亲手做的菜吧！">
<template #extra>
<el-button type="primary" @click="currentStep = 0">从头开始</el-button>
</template>
</el-result>
</div>
<!-- TODO 3 END -->
`
}作者自我解释版：
/** TODO 1 START 请在下面补充代码 **/
// 注册组件app.use(?)
app.use(ElementPlus)
/** TODO 1 END **/
export default {
template: `
<!-- TODO 2 START 请在下面补充代码 -->
<!-- 要求：添加 ElementPlus Steps 步骤条组件 -->
<!-- 要求一：垂直放置 direction="vertical"-->
<!-- direction CSS 属性用于设置文本、表格列和水平溢出的方向 -->
<!-- vertical 竖向切换 -->
<!-- 要求二：步骤条的 active 属性值需要绑定为 currentStep 变量 -->
<!-- :active="currentStep" -->
<!-- 冒号是Vue中用来绑定属性名的语法符号 -->
<!-- 要求三：请遍历菜谱步骤数组 cookbook.steps 生成步骤条中的每一个步骤 -->
<!-- 遍历数组使用v-for -->
<!-- 但是注意要在el-step上遍历 -->
<!-- 有了cookbook.steps 数组中项的格式，遍历按照此遍历 v-for="(item,index) in cookbook.steps" -->
<!-- 定义:key -->
<!-- title渲染 cookbook.steps中的titlt属性 -->
<el-steps :active="currentStep" direction="vertical">
<el-step v-for="(item,index) in cookbook.steps" :key="index" :title="item.title"></el-step>
</el-steps>
<!-- TODO 2 END -->
<!-- TODO 3 START 请在下面补充代码 -->
<!-- 要求：添加 ElementPlus Result 结果组件 也就是当步骤放完时，加一个最后的结语 -->
<!-- 要求一：此组件仅在 currentStep >= stepCount 条件满足时显示 -->
<!-- 单独添加一个div，并用v-show表示显示条件 v-show="currentStep >= stepCount"-->
<!-- 要求二：需要设置 class 为 completed-tutorial -->
<!-- div上设置即可 class="completed-tutorial" -->
<!-- 要求三：显示图标为 success，标题内容为 已完成，副标题为 恭喜你，完成了所有步骤，快尝尝自己亲手做的菜吧！ -->
<!-- 题目中有 el-result 组件的api，一一对应即可 -->
<!-- 要求四：在 extra 插槽中放置一个按钮 -->
<!-- 这个要求可能会难一点，并且题目中也没有告诉 其实也就是加上一个 #extra-->
<div v-show="currentStep >= stepCount" class="completed-tutorial" >
<el-result
icon="success"
title="已完成"
sub-title=" 恭喜你，完成了所有步骤，快尝尝自己亲手做的菜吧！">
<template #extra>
<el-button type="primary" @click="currentStep = 0">从头开始</el-button>
</template>
</el-result>
</div>
<!-- TODO 3 END -->
`
}本道题其实一点也不难，只要理解了题目，根据题目给出的属性慢慢来，其实是非常简单的
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！