个人博客踩坑记录

项目场景：

vue＋elementui+node ，个人博客开发踩坑记录…

---

问题描述：

1. element-ui ，页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

<el-menu
          @select="handleSelect"
          :default-active= "activePath"
          background-color="#F0F2F1"
          text-color="#000"
          active-text-color="#0683B1"
          :collapse="isCollapse"
          :collapse-transition="false"
          router>
/el-menu>

---

2. element-ui ，upload 图片上传与回显问题

---

原因分析：

1. 页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

 default-active只是在初始化会取设定的值，只改这个是没用的，不会触发内部子组件的重新渲染，触发select事件才会让内部子组件重新渲染，比如一般写vue组件是把props传递给组件内部的data，再对内部data做操作。

---

2. upload 图片上传与回显问题

  由于upload上传成功后，会触发handleSuccess函数，通过这个函数可以设置当前页面显示图片路径。那么问题来了，当页面已经有图片显示时，upload上传成功后会生成一个fileList数组对象，存储着已经上传的图片列表。这种情况会导致两张图片并行同步显示同一张图片，一张是页面img图片，路径为当前表单对象的图片路径；另一张是fileList文件图片，可以通过upload内置的函数对象处理图片的预览以及删除等。

---

3. 富文本编辑器回显带有<p>标签的问题

---

解决方案：

1. 页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

  对路由进行监听，让内部子组件重新渲染，实现导航菜单正确高亮变化。

 methods: {
    handleSelect (index) {
      this.activePath = index
    }
    
 watch: {
    // 监听路由变化  解决左侧导航栏activePath不实时更新问题
    $route (to, from) {
    //由于to.path.name获取到的路径带有'/'，截取后再进行正确的导航栏activePath赋值。
      this.handleSelect(to.path.substring(1)) 
    }
  }

---

2. upload 图片上传与回显问题

  首先想到的是设置v-show，控制显示图片的img标签的显示与隐藏，当upload组件上传成功后，即因为handleSuccess函数执行时，组件会显示带有预览和删除功能的图片列表，同时设置img图片为隐藏。成功解决两个图片控件同时出现并显示同一张图片的问题。


ps：由于服务器返回的路径不是完整路径，需要拼接服务器路径http：//localhost/，图片才能正常显示

  第二天继续学习时，发现可以在upload组件fileList上做下手脚。因为upload组件（我使用的是list-type=“picture-card”），可以通过设置upload组件，:file-list=“fileList” ，来达到实现显示页面回填的效果（编辑页面图片），从而不需要另外的img来显示页面图片（用户头像等）。

当页面刷新时，对fileList数组进行判断，如果为空，通过upload组件显示实时由服务器返回的用户图片。这样就可以直接对图片进行预览删除等处理，而不用再次点击上传图片来删除返回的用户信息图片。

3. 富文本编辑器回显标签问题

使用v-html ，直接解决文本内容带有标签问题