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

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

下面进行随机掏空，代码也很简单！

//随机掏空
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++) {
 //抽取当前行的所有坐标
 nowItme = arrText[i].split(',');
 nowOption = [];
 //当前行的随机两个坐标掏空
 for (let j = 0; j < 2; j++) {
  //抽取当前行的随机一个坐标
  _option = Math.floor(Math.random() * nowItme.length);
  //分割坐标的x,y
  nowOption = nowItme.splice(_option,1)[0].split("-");
  this.allNum[nowOption[0]][nowOption[1]] = '';
 }
}

这样相信大家都觉得奇怪，下面进行下样式的该写，就是把设空了的格子的样式改一下！.no这个class对应的样式我在css那里写好了，大家注意下。

<!--遍历每一行-->
<div v-for="row,index in allNum" class="num-row chearfix">
 <!--遍历行里面的每一列-->
 <!--
  no:被掏空数组的样式
 -->
 <div v-for="num1,indexSub in row" :class="{'no':num1===''}" class="num-col">
  {{allNumText[index][indexSub]}}
 </div>
</div>

3-4.显示数字键盘

首先，我简单的用一个流程图说下逻辑，如下

然后关于数字键盘的位置，看下图（数字键盘的样式我不多说了，就是一个是相对定位，一个绝对定位的设置而已）

如上图，我点击的是第一行第三个格子，首先，我期待被点击的格子的样式有所改变，方便我区分，这个不难，用一个class改变样式就可以了，这个可以看下面的代码，我用一个.cur的class控制样式。还有一个就是期待数字键盘在第二行，第四个格子那里出现。这样的话，大家就知道，数字键盘的位置是怎么定位的了！数字键盘的top就是，被点击格子所在的行的索引+160（60是格子的宽高），left就是，被点击格子所在的列的索引+160（60是格子的宽高）。比如上图，第一行第三个格子，top=(0+1)*60+'px',left=(2+1)*60+'px'。

代码如下

<!--遍历每一行-->
 <div v-for="row,index in allNum" class="num-row chearfix">
  <!--遍历行里面的每一列-->
  <!--
   no:被掏空数组的样式
   cur:格子被点击时触发，被点击的格子样式
  -->
  <div v-for="num1,indexSub in row"
    :class="{'no':num1==='',
    'cur':curRow===index&&indexSub===curCol}"
    @click="showCheck(index,indexSub)" class="num-col">
   {{allNumText[index][indexSub]}}
  </div>
 </div>
<!--数字键盘-->
<div class="num-check chearfix" :style="{'top':(curRow+1)*60+'px','left':(curCol+1)*60+'px'}"
  v-show="checkShow">
 <ul>
  <li @click="inputText(1)">1</li>
  <li @click="inputText(2)">2</li>
  <li @click="inputText(3)">3</li>
  <li @click="inputText(4)">4</li>
  <li @click="inputText(5)">5</li>
  <li @click="inputText(6)">6</li>
  <li @click="inputText(7)">7</li>
  <li @click="inputText(8)">8</li>
  <li @click="inputText(9)">9</li>
 </ul>
</div>

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

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

相关推荐