山东大学软件学院创新项目实训-基于LLM的药物分子性质分析平台（二）

本周任务，主要是搭建前端框架出现的问题：

1.element-ui插槽问题：

问题：前端页面中点击折叠后，左侧菜单的图标不显示。

分析原因：其中的“主页”页面中定义了与title匹配的插槽，但其实这是不必要的。

解决：将上述的插槽删除即可。

注意:只有正确使用slot属性才能让侧边栏和折叠效果正常联动。

关于slot：slot 属性用于定义插槽。插槽是一种特殊的占位符，允许在父组件中插入子组件的内容。在父组件中，可以使用 slot元素来定义一个插槽并定义了一个占位符，说明了在父组件中的哪个位置应该插入子组件的内容。在子组件中，可以使用父组件提供的插槽来分发内容组并可以将子组件的内容插入到父组件的插槽中。

2.echarts中引入图片不成功问题：

echarts加载远程图片不成功，前端显示“网络连接”错误，所以将图片下载到本地后采用如下手段解决：

其中return {//返回图片数据 symImg: img

}是必要的。因为在vue中必须在data函数中返回静态数据才能使用。

// 引入图片
import img from './public/img/img.png'
​
export default {
  data() {
      return {//返回图片数据
          symImg: img
      }
  },
  methods: {
      ...
      this.echartsObj.data = [
          ...
          {
              name: 'name',
              x: 10,
              y: 10,
              // 使用
              symbol: this.symImg,
          }
          ...
      ]
      ...
  }
}

最终效果展示图：