解决百星官网服务页小三角问题.md

解决百星官网服务页小三角问题

最开始解决思路：

1. svg
2. 图片
3. canvas

询问Aaron后尝试使用CSS绘制小三角，小三角实现代码：

.arrow
       position: absolute
       top: 18px
       right: -47px
       width: 8px
       height: 8px
       border-top: 1px solid #e0e0e0
       border-right: 1px solid #e0e0e0
       transform: rotate(225deg)

接下来的思路：

1. v-for循环列表时给每个list添加小三角div
2. 给小三角添加v-show指令
3. 当鼠标经过list时使用排他功让所有的list小三角都不显示
4. 只显示当前鼠标所在的list的小三角

但在代码编写过程中踩坑，具体为排他写完后还需绑定多个属性，较麻烦，与Anna、Linda、Annie商量后决定换个思路：

1. 给list添加鼠标经过的事件上传入参数index（即v-for循环渲染列表时的index）
2. 将小三角div的固定样式改为绑定样式:class
3. 当鼠标经过时list时在method中将index赋值给此时的nowIndex（初始值为0）
4. 判断index等于nowIndex时将小三角样式绑定到div上：

<div :class="{ arrow: index==nowIndex }"></div>

最终完美解决