vue hover事件_Vue入门，从扫雷开始 - 编写第二个组件 (6/7)

最新推荐文章于 2023-11-11 05:00:00 发布

justride

最新推荐文章于 2023-11-11 05:00:00 发布

阅读量170

点赞数

文章标签： vue hover事件 vue 点击事件 vue右击弹框跟随鼠标位置 vue右键复制粘贴功能 vue点击事件 vue点击事件改变样式

雷区

上一节已经画出了雷区，并且按位置放置好了雷，那么这一节，就要开始交互处理了。

但是，细细一想，在扫雷游戏中，每个雷区都会有遮罩(mask)、雷、旗、问号等显示，并且需要处理鼠标的左/右键的点击事件，相对来说，这算一个比较复杂的功能了。既然如此，就新写一个组件 Square.vue 吧。

雷 {{square.count}}

此时，我使用了 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 中引用:

到现在，就有了简单的鼠标交互了，此时点击雷区就能翻开指定块了。

回想一下扫雷这个游戏，还需要通过鼠标右键来将某个区标记为雷(插旗)，所以我们需要再给组件加上鼠标的右键事件，此时，就可以对组件进行一些改造使其能同时响应鼠标的左右键事件，模板如下:

Square.vue

雷 {{countText}}

效果如图

继续解释一下新增加的部分:

@click.left 和 @click.right.prevent 分别绑定鼠标的左/右键点击事件，left、right 以及 prevent 都是 Vue 提供了事件修饰符，其中的 prevent 即e.preventDefault()
flagged 新添加的数据，用于标记雷区是否使用旗标记
countText 这个计算属性，用于在周围的雷数量为 0 时，在界面上显示为空白

到此，扫雷的基本功能就完成了。

本节完

关注