实现侧边栏ABCDEFGHIJKLMNOPQRSTUVWXYZ
点击某个字母出发相应事件
html
<!-- 字母索引 -->
<div class="altherList">
<p
class='letter'
@click="clickIndexBar(index)"
v-for="(item,index) in indexList"
:key="index"
>{{indexList[index]}}</p>
</div>
css
/* 右边字母列表div栏样式 */
.altherList {
position: fixed;
left: 1%;
top: 14%;
height: 50%;
z-index: 6;
}
/* 字母样式 */
.letter {
color: #101010;
z-index: 5;
line-height: 0.3;
width: 10px;
height: 7px;
}
点击字母是触发click事件
使用indexLast 记录上次的索引,实现本次点击的字母颜色变色,上次点击的字母回复之前的颜色
clickIndexBar (index) {
var letterObj = document.getElementsByClassName('letter')
letterObj[this.indexLast].style.color = '#101010'
letterObj[index].style.color = '#2BD5D5'
alert(this.indexList[index])//弹出点击的某个字母,可替换相应事件
this.indexLast = index
}