雷區
上一節已經畫出了雷區，並且按位置放置好了雷，那麼這一節，就要開始交互處理了。
但是，細細一想，在掃雷遊戲中，每個雷區都會有遮罩(mask)、雷、旗、問號等顯示，並且需要處理鼠標的左/右鍵的點擊事件，相對來說，這算一個比較複雜的功能了。既然如此，就新寫一個組件 Square.vue 吧。
Square.vue
<template>
雷
{{square.count}}
/<template>
<style><br>.square {<br> display: block;<br> height: 30px;<br> line-height: 30px;<br> width: 30px;<br> text-align: center;<br> background-color: burlywood;<br> /* 設置鼠標動作交互 */<br> &:hover {<br> background-color: lightblue;<br> }<br>}<br><br>.clipped,<br>.clipped:hover {<br> background-color: #ffffff;<br>}<br>/<style>
此時，我使用了 Less 樣式，需要先安裝 Less 支持 yarn add less less-loader -D，對應的 npm 命令為 npm install less less-loader --save-dev
效果如下
現在來說明一下此組件中用到的東西:
設置了一個名為 data 的屬性(prop)，以接收從父組件 Board傳過來的雷區數據。設置數據 clipped 用來標記雷區是否已經翻開計算屬性 computedClass在 Board.vue 中引用:
<template>
<table>
<square>
/<table>
/<template>
到現在，就有了簡單的鼠標交互了，此時點擊雷區就能翻開指定塊了。
插旗標記
回想一下掃雷這個遊戲，還需要通過鼠標右鍵來將某個區標記為雷（插旗），所以我們需要再給組件加上鼠標的右鍵事件，此時，就可以對組件進行一些改造使其能同時響應鼠標的左右鍵事件，模板如下:
Square.vue
<template>
class="square"
:class="computedClass"
@click.left="onLeftClick"
@click.right.prevent="onRightClick"
>
雷
{{countText}}
:class="computedClass"
@click.left="onLeftClick"
@click.right.prevent="onRightClick"
>
雷
{{countText}}
/<template>
<style><br>.flagged {<br> &:after {<br> content: "旗";<br> background-color: red;<br> color: white;<br> padding: 1px 3px;<br> font-size: 12px;<br> }<br>}<br>/<style>
效果如圖
繼續解釋一下新增加的部分:
@click.left 和 @click.right.prevent 分別綁定鼠標的左/右鍵點擊事件，left、到此，掃雷的基本功能就完成了。
本節完