给vant侧边导航＜van-sidebat＞添加小图标

---

前言

最近想优化一下自己做的功能小界面，于是盯上了侧边导航栏的样式。
这个vant组件的侧边导航栏，默认不支持添加图标的功能，只能自己强行添加，所以这个方法也适用于其他需要添加图标的地方。

优化前	优化后

这里记录一下处理方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、界面样式

<van-sidebar ref="supMaterialIcon" v-model="materialLeftActive" @change="onChangeMaterial">
  <van-divider class="material-left-divider"> 材质替换 </van-divider>
  <van-sidebar-item title="吊柜"/>
  <van-sidebar-item title="高柜/地柜"/>
  <van-sidebar-item title="台面"/>
  <van-divider class="material-left-divider"> 模型替换 </van-divider>
  <van-sidebar-item title="把手"/>
  <van-divider class="material-left-divider"> 硬装替换 </van-divider>
  <van-sidebar-item title="墙面"/>
  <van-sidebar-item title="地面"/>
</van-sidebar>

在上面代码中，简单使用vant库中的两个组件：
van-sidebar和van-divider构成侧边导航栏。
想要给每个导航添加图标，需要编辑DOM。

二、方法实现

export default {
mounted() {
  // 这里通过this.$nextTick确认组件已经加载完成
  this.$nextTick(() => {
    this.setMaterialEditIcon()
  });
}，
 methods: {
 	// 遍历每个`van-sidebar-item`，在节点中分别插入img标签，把图标添加到每个侧边导航栏中。
	setMaterialEditIcon() {
     // 按顺序设置材质替换各选项的图标
     let imgArr = [ "doorIcon", "wallBoard", "tableIcon", "handleIcon", "wallIcon", "floorIcon" ]
     // 设置图标样式，可以不加
     const imgStyle = "height: 0.5rem; float: left; margin-right: 0.2rem; margin-top: -0.1rem;"
     imgArr.forEach((item, index) => {
       const html = `<img style='${imgStyle}' src='static/image/${item}.png' />`
     // 使用innerHtml添加节点
 this.$refs["supMaterialIcon"].$children[index].$el.innerHTML += html
     })
   }
 }
}
</script>

实现思路如下：

1、首先定位到要添加图标的节点位置，这里使用vue的ref定位，只需要设置父节点van-sidebar的 ref="supMaterialIcon"即可。
2、在项目的pulic/static目录下存放图标文件，以备使用。
3、等待van-sidebar组件加载完毕后，查找节点树，找到对应节点，添加图标。

总结

这个方法适用于所有组件，但是因为要操作DOM，所以不建议大量使用，会影响效率。