目标

请在 js/index.js 和 index.html 文件中补全代码，完成以下目标：

1. 点击“定制方案”按钮后，弹出侧滑页面，所使用的组件为 el-drawer，相关属性如下：

参数	说明	类型	默认值
v-model	是否显示 Drawer	boolean	false

1. 封装 sortItem 函数，按照食物属性名称将早餐/午餐/晚餐的数组数据从大到小排序，然后找到排序后的数组中第一个不大于对应摄入量上限的食材对象，并将其返回。

sortItem 参数：

• arr：早餐/午餐/晚餐的数据。
• pro：食物属性名称，可取值 carbohydrate/protein/fat。
• compare：糖类、蛋白质、脂肪的对应摄入量上限值，作为比较条件用的，已传入具体值。

sortItem 返回值示例

{"name": "鸡蛋","carbohydrate": 1.5,"protein": 12.7,"fat": 9,"kcal": 138,"weight": 100
}

早餐/午餐/午餐中数据字段说明如下：

名称	说明
name	食材名称
carbohydrate	碳水化合物（单位：克）
protein	蛋白质（单位：克）
fat	脂肪（单位：克）
kcal	食物热量（单位：克）
weight	重量（单位：克）

完成后，点击定制方案按钮，效果如下：

题解

目标1

//index.html中<!-- TODO：待补充代码，点击按钮时显示抽屉组件 -->
<el-drawer title="我是标题" v-model="drawer" :with-header="false" size="60%"  :direction="direction">//index.js中const submit = async() => {// TODO 待添加的代码 功能显示抽屉组件drawer.value=true;
}

 目标2

const sortItem = (arr, pro, compare) => {// TODO 根据 compare 匹配食材对象后返回这个对象let bestItem = null;let minDiff = Number.MAX_VALUE;for (let i = 0; i < arr.length; i++) {const item = arr[i];const diff = Math.abs(item[pro] - compare);if (diff < minDiff) {minDiff = diff;bestItem = item;}}return bestItem;};