Vue 点击获取当前元素下标
项目开发中,固定列表是很常见的,有时候我们需要得到元素的下标去做一些事情,但是少了v-for想要获取下标就比较困难了,下面我便介绍我的方法:其实我用的方法很简单,就是用事件委托机制去获取事件发生的元素,再获取父元素的子元素集合,再遍历子元素集合,当事件发生元素等于子元素集合中的某一个时,返回数组下标,即可得到事件发生元素的下标。<template><div
·
项目开发中,固定列表是很常见的,有时候我们需要得到元素的下标去做一些事情,但是少了v-for想要获取下标就比较困难了,下面我便介绍我的方法:
其实我用的方法很简单,就是用事件委托机制去获取事件发生的元素,再获取父元素的子元素集合,再遍历子元素集合,当事件发生元素等于子元素集合中的某一个时,返回数组下标,即可得到事件发生元素的下标。
<template>
<div class="footer-tab">
<div class="tab-item">home</div>
<div class="tab-item">second</div>
<div class="tab-item">third</div>
</div>
</template>
<script>
export default {
name: 'commonFooter',
data() {
return {}
},
created() {
},
mounted(){
let _this=this;
//事件委托
document.querySelector(".footer-tab").addEventListener("click",function(e){
let target=e.target;//事件发生的元素
let nodeList=e.target.parentNode.children;//同级元素集合
let targetIndex=_this.tabIndex(target,nodeList);//调用tabIndex方法,返回值便是元素下标
console.log(targetIndex)//打印当前点击元素的下标
})
},
methods: {
/**
*
* @param target 事件触发的元素
* @param nodeList 元素集合
* @returns {number} 返回事件触发元素的下标
*/
tabIndex(target,nodeList){
for(let i=0;i<nodeList.length;i++){
if(target===nodeList[i]){
return i;
}
}
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)