我有一个带有b-list-group-item（bootstrap4）的边栏。我想从单击的每个项目的顶部获得位置。
我试图通过document.getElementbyID来获取职位，但没有帮助。
MainPage.vue
脚本：
toShow(e){
if(this.isShown){
this.isShown = false;
}
else{
this.isShown = true;
// this.top = document.getElementsByClassName('subCategory').style.top;
// let heightSubcat = document.getElementsByTagName('b-list-group-item').height;
// alert(heightSubcat);
// this.top = heightSubcat - e.clientY + 'px';
alert(window.scrollY + document.querySelector('div').getBoundingClientRect().top);
}
}
}
模板：
<div id="sidebar" class="mobileMenu" :class="[isOpen ? 'open' : 'closed']">
<b-list-group>
<b-list-group-item><span>ФИЗ.ЛИЦАМ</span></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item><span>ЮР.ЛИЦАМ</span></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>СОЦИАЛЬНЫЕ ОТЧИСЛЕНИЯ</a></b-list-group-item>
<b-list-group-item><span>ИП.КХ</span></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>СОЦИАЛЬНЫЕ ОТЧИСЛЕНИЯ</a></b-list-group-item>
<b-list-group-item><span>ЕД.СОВОКУПНЫЙ ПЛАТЕЖ</span></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>ЕСП (1 МРП)</a></b-list-group-item>
<b-list-group-item @click="toShow" class="subCategory"><a>ЕСП (0.5 МРП)</a></b-list-group-item>
</b-list-group>
</div>
只需使用click事件的目标即可：
toShow(e){
if(this.isShown){
this.isShown = false;
}
else{
this.isShown = true;
alert(window.scrollY + e.target.getBoundingClientRect().top);
}
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句