解决百星官网服务页小三角问题
最开始解决思路:
- svg
- 图片
- 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)
接下来的思路:
- v-for循环列表时给每个list添加小三角div
- 给小三角添加
v-show
指令 - 当鼠标经过list时使用排他功让所有的list小三角都不显示
- 只显示当前鼠标所在的list的小三角
但在代码编写过程中踩坑,具体为排他写完后还需绑定多个属性,较麻烦,与Anna、Linda、Annie商量后决定换个思路:
- 给list添加鼠标经过的事件上传入参数
index
(即v-for
循环渲染列表时的index
) - 将小三角div的固定样式改为绑定样式
:class
- 当鼠标经过时list时在method中将index赋值给此时的
nowIndex
(初始值为0) - 判断
index
等于nowIndex
时将小三角样式绑定到div上:
<div :class="{ arrow: index==nowIndex }"></div>
最终完美解决