雷區
上一節已經畫出了雷區，並且按位置放置好了雷，那麼這一節，就要開始交互處理了。
但是，細細一想，在掃雷遊戲中，每個雷區都會有遮罩(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 用於在 clipped 變化時，自動切換樣式類 clipped
- 計算屬性 square 用於獲取屬性數據 data，並在其為空時使用一個空對象代替
- 方法 onClick 接收此組件被點擊的事件
- :class="computedClass" @click="onClick" 分別設置樣式 clipped 和綁定事件 onClick
- 使用了 v-if 語法，在不同的條件下顯示不同的內容
- {{square.count}} 輸出文本到界面上
在 Board.vue 中引用:
<template>
<table>
<square>
/<table>
/<template>
到現在，就有了簡單的鼠標交互了，此時點擊雷區就能翻開指定塊了。
插旗標記
回想一下掃雷這個遊戲，還需要通過鼠標右鍵來將某個區標記為雷（插旗），所以我們需要再給組件加上鼠標的右鍵事件，此時，就可以對組件進行一些改造使其能同時響應鼠標的左右鍵事件，模板如下:
Square.vue
<template>
class="square"
: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、right 以及 prevent 都是 Vue 提供了事件修飾符， 其中的 prevent 即e.preventDefault()
- flagged 新添加的數據，用於標記雷區是否使用旗標記
- countText 這個計算屬性，用於在周圍的雷數量為 0 時，在界面上顯示為空白
到此，掃雷的基本功能就完成了。
本節完
分享到:
閱讀更多 前端小李 的文章
