利用vue开发一个所谓的数独方法实例(4)

日期：2020-05-11 栏目：程序人生浏览：次

js代码

/**
 * @description 显示数字键盘
 * @param i1
 * @param i2
 */
showCheck(i1, i2){
 //点击的格子是否是被掏空的格子
 if (this.allNum[i1][i2] !== '') {
  return
 }
 //点击的格子如果是上一次点击的格子（当前格子）
 if (i1 === this.curRow && i2 === this.curCol) {
  //隐藏数字键盘，curRow和curCol设空
  this.checkShow = false;
  this.curRow = '';
  this.curCol = '';
 }
 else {
  //隐藏数字键盘，curRow和curCol分别设置成当前的点
  this.checkShow = true;
  this.curRow = i1;
  this.curCol = i2;
 }
},

运行效果

3-5.高亮显示同行同列

这一步很简单，首先，高亮显示行，大家都知道怎么做了，就是行对应的div，设置一个:hover，然后对应设置单元格的样式而已！这个不多说！

然后，高亮显示列，复杂一点，但是也很简单，原理我想大家也知道，就是当鼠标进如格子的时候，在data里面，用一个变量储存进入的格子的列的索引，然后加上判断，如果格子的列的索引等于进入的格子的列的索引。就加上一个class，这里我用.cur-col。

代码如下

<!--遍历每一行-->
<div v-for="row,index in allNum" class="num-row clear">
 <!--遍历行里面的每一列-->
 <!--
  no:被掏空数组的样式
  cur:格子被点击时触发，被点击的格子样式
  cur-col:鼠标进入的时候触发，和被点击格子同一列的格子的样式
 -->
 <div v-for="num1,indexSub in row"
   :class="{'no':num1==='',
   'cur':curRow===index&&indexSub===curCol,
   'cur-col':hoverCol===indexSub}"
   @click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
  {{allNumText[index][indexSub]}}
 </div>
</div>

运行效果

3-6.填写操作和错误提示

这一步的操作函数，我直接发代码吧，看代码比我说的会清晰些，毕竟说的有点绕

<!--遍历每一行-->
<div v-for="row,index in allNum" class="num-row clear">
 <!--遍历行里面的每一列-->
 <!--
  no:被掏空数组的样式
  cur:格子被点击时触发，被点击的格子样式
  cur-col:鼠标进入的时候触发，和被点击格子同一列的格子的样式
  err：填写错误的时候触发的样式
 -->
 <div v-for="num1,indexSub in row"
   :class="{'no':num1==='',
   'cur':curRow===index&&indexSub===curCol,
   'cur-col':hoverCol===indexSub,
   'err':(optionNow.x===index&&optionNow.y===indexSub)||(optionNowInRow.x===index&&optionNowInRow.y===indexSub)||(optionNowInCol.x===index&&optionNowInCol.y===indexSub)}"
   @click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
  {{allNumText[index][indexSub]}}
 </div>
</div>

转载注明出处：http://www.heiqu.com/149.html

利用vue开发一个所谓的数独方法实例(4)

相关推荐