备赛蓝桥杯之第十六届模拟赛2期职业院校组第六题：菜谱教程

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

---

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

本题目为：备赛蓝桥杯之第十六届模拟赛2期职业院校组第六题：菜谱教程

---

题目：

经过运行环境运行之后的效果如下：

本题需要做的代码如下：

/** TODO 1 START 请在下面补充代码 **/

/** TODO 1 END **/

export default {
    template: `
        

        



        

        
    `
}

 本题目标如下：

请在 js/index.js 、components/App.js 这两个文件中补充代码，具体要求如下：

1. 请在 js/index.js 中 TODO1 处完成 ElementPlus 插件注册。
2. 请在 components/App.js 中 TODO2 处补全代码，添加 ElementPlus Steps 步骤条组件，用以显示菜谱中的制作步骤。

• 步骤条需要垂直放置。
• 步骤条的 active 属性值需要绑定为 currentStep 变量。
• 请遍历菜谱步骤数组 cookbook.steps 生成步骤条中的每一个步骤，格式如下：

• cookbook.steps 数组中项的格式为：

  {
      "title": "", // 步骤标题，需要显示在步骤条组件的相应步骤上
      "content": "" // 步骤内容描述
  },
  

• 用到变量说明如下：

  名称	说明	类型
  currentStep	当前显示的步骤序号	Ref
  stepCount	菜谱中操作步骤的总数	ComputedRef

• 实现功能所需的 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-result 组件 api 如下：

  参数	说明	类型	默认值
  icon	result 组件的图标类型	enum('success' 、 'warning' 、 'info' 、 'error')	info
  title	result 组件的标题	string
  sub-title	result 组件的副标题	string

使用示例：

说人话：

        就是使用题目中给出的属性，再加上一点点自己的理解填上属性即可

---

本题作者想说

答案：

/** TODO 1 START 请在下面补充代码 **/
app.use(ElementPlus)
/** TODO 1 END **/

export default {
    template: `
    
        
            
        
    

    
        

            
                
            
        
    
    `
}

作者自我解释版：

/** TODO 1 START 请在下面补充代码 **/
// 注册组件app.use(?)
app.use(ElementPlus)
/** TODO 1 END **/

export default {
    template: `
    
    
    
        
        
    
        
        
    
        
        
        
        
        
    
        
    
    

    
    
    
        
    
        
    
        
    
        
    

        
            
        
    
    
    `
}

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

---

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

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