vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色

vue实现5*5宫格当鼠标滑过选中的正方形背景颜色统一变色

1、实现的效果

2、完整代码展示

<template><div id="app" @mouseleave="handleMouseLeave({row: 0, col: 0 })"><div v-for="rowItem in squareNumber" :key="rowItem"><div class="row-list"><div v-for="colItem in squareNumber" :key='colItem' :class="['col-item', `${rowItem}-${colItem}`]" @mouseenter="handleMouseEnter({row: rowItem, col:colItem })"@mouseleave="handleMouseLeave({row: rowItem, col:colItem })"></div></div></div></div>
</template><script>export default {data() {return {squareNumber: 5}},methods: {handleMouseEnter(obj) {const {row, col} = obj;for(let rowItem = 1; rowItem <= row; rowItem++ ) {for(let colItem = 1; colItem <= col; colItem ++) {const element = document.getElementsByClassName(`${rowItem}-${colItem}`);if(element) {Array.from(element).forEach(item => {item.style.background = 'red';})}}}},handleMouseLeave(obj) {const {row, col} = obj;for(let rowItem = 1; rowItem <= this.squareNumber; rowItem++ ) {for(let colItem = 1; colItem <= this.squareNumber; colItem ++) {const element = document.getElementsByClassName(`${rowItem}-${colItem}`);if(element) {Array.from(element).forEach(item => {item.style.background = 'none';})}}};if(!row || !col) {this.handleMouseEnter({row: row - 1, col: col - 1})}}}
}
</script><style>
#app {border-top:1px solid black;border-left: 1px solid black;
}
.row-list {display: flex;
}
.col-item {width: 30px;height: 30px;border-right: 1px solid black;border-bottom: 1px solid black;
}
</style>

以上代码粘贴赋值即可使用