福州 福马路 网站建设个体可以做几个网站

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

---

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：备赛蓝桥杯之第十六届模拟赛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 这两个文件中补充代码，具体要求如下：

1. 请在 js/index.js 中 TODO1 处完成 ElementPlus 插件注册。
2. 请在 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')	horizontal
  active	设置当前激活步骤	number	0

• 实现功能所需的 el-step 组件 api 如下：

  参数	说明	类型	默认值
  title	标题	string

1. 请在 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')	info
  title	result 组件的标题	string
  sub-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-resulticon="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-resulticon="success"title="已完成" sub-title=" 恭喜你，完成了所有步骤，快尝尝自己亲手做的菜吧！"><template #extra><el-button type="primary" @click="currentStep = 0">从头开始</el-button></template></el-result></div><!-- TODO 3 END -->`
}

本道题其实一点也不难，只要理解了题目，根据题目给出的属性慢慢来，其实是非常简单的 

---

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！