通过学习Vue自定义组件，可以开发一些小功能，自娱自乐，巩固学习的基础知识，本文以一个简单的拼图小游戏的例子，简述Vue自定义组件的开发，调用等基本流程，仅供学习分享使用，如有不足之处，还请指正。

涉及知识点

关于Vue组件的基础知识，前篇已有介绍，本例涉及知识点如下：

拼图游戏，只有相邻的元素才可以交换位置，那如何判断两个元素相邻，方法如下：
- 左右相邻：y轴坐标相同，x轴相减的绝对值等于一个元素的宽度。
- 上下相邻：x轴坐标相同，y轴相减的绝对值等于一个元素的高度。
如何判断拼图中的可以与之交换位置的空白，方法如下：
- 通过ref引用属性，将空白属性，定义为empty,其他定义为block，以便区分。
如何将一张图放到每一个元素上，并只显示一块内容，方法如下：
- 将背景图的位置和元素的坐标起始位置关联起来，即将图片的向左上方平移即可。
元素之间的切换平滑过渡。在本例中，通过css样式设置，所有元素的移动都在0.3s内完成，达到平滑过渡的效果。

示例效果图

本例中拼图游戏一共分5关，分别是3*3，4*4等，难度逐级增加，所用图片的均是500px*500px大小，如下图所示：

当拼图完成时，询问是否进行下一关，如下所示：

下一关，效果如下所示：

其他效果图类似，只是分的行和列递增，拼图难度增加，但是处理逻辑都是相同的。

核心源码

关于Puzzle.vue源码，如下所示：

模板部分（template），主要是元素的布局，本例采用v-for动态加载，如下所示：

				
<template>
 <div class="puzzle" :style="{width:width+'px',height:height+'px'}">
   <div
     v-for="(item,index) in blockPoints"
     :key="item.id"
     :style="{width:blockWidth+'px',
       height:blockHeight+'px',
       left:item.x+'px',top:item.y+'px',
       backgroundImage:`url(${img})`,
       backgroundPosition:`-${correctPoints[index].x}px -${correctPoints[index].y}px`,
       opacity: index===blockPoints.length-1 && 0 }"
     v-on:click="handleClick"
     class="puzzle__block"
     :ref="index===blockPoints.length-1?'empty':'block'"
     :data-correctX="correctPoints[index].x"
     :data-correctY="correctPoints[index].y"
   ></div>
 </div>
</template>
				

脚本部分（Script），主要用于逻辑的校验和判断，如下所示：

				
<script>
export default {
 props: {
   img: {
     // 图片路径
     type: String,
     required: true,
   },
   width: {
     // 图片总宽度
     type: Number,
     default: 500,
   },
   height: {
     // 图片总高度
     type: Number,
     default: 500,
   },
   row: {
     // 行数
     type: Number,
     default: 3,
   },
   col: {
     // 列数
     type: Number,
     default: 3,
   },
 },
 data() {
   return {
     status: {
       type: String,
       default: "进行中......",
     },
   };
 },
 methods: {
   handleClick(e) {
     const blockDom = e.target;
     const empthDom = this.$refs.empty[0];
     const { left, top } = blockDom.style;
     if (!this.isAdjacent(blockDom, empthDom)) {
       return;
     }
     //交换元素
     blockDom.style.left = empthDom.style.left;
     blockDom.style.top = empthDom.style.top;
     empthDom.style.left = left;
     empthDom.style.top = top;
     const winFlag = this.winCheck();
     if (winFlag) {
       //   console.log('success');
       this.winGame(empthDom);
     }
   },
   isAdjacent(blockDom, empthDom) {
     // 判断是否相邻
     const { left: blockLeft, top: blockTop, width, height } = blockDom.style;
     const { left: emptyLeft, top: emptyTop } = empthDom.style;
     const xDis = Math.floor(
       Math.abs(parseFloat(blockLeft) - parseFloat(emptyLeft))
     );
     const yDis = Math.floor(
       Math.abs(parseFloat(blockTop) - parseFloat(emptyTop))
     );
     const flag =
       (blockLeft === emptyLeft && yDis === parseInt(height)) ||
       (blockTop === emptyTop && xDis === parseInt(width));
     console.log(flag);
     return flag;
   },
   winCheck() {
     // 判断是否完成
     const blockDomArr = this.$refs.block;
     return blockDomArr.every((dom) => {
       const { left: domLeft, top: domTop } = dom.style;
       const { correctx: correctX, correcty: correctY } = dom.dataset;
       const flag =
         parseInt(domLeft) === parseInt(correctX) &&
         parseInt(domTop) === parseInt(correctY);
       return flag;
     });
     // console.log(blockDomArr.length);
   },
   winGame(empthDom) {
     //通关
     setTimeout(() => {
       this.status = "胜利";
       alert("恭喜通关");
       empthDom.style.opacity = 1;
       this.$emit("getStatus");
       setTimeout(() => {
         this.goToNextLevel();
       }, 300);
     }, 300);
   },
   goToNextLevel() {
     const answerFlag = window.confirm("现在进行下一关么？");
     if (answerFlag) {
       this.status = "进行中......";
       this.$emit("next");
     }
   },
 },
 computed: {
   blockWidth() {
     return this.width / this.col;
   },
   blockHeight() {
     return this.height / this.row;
   },
   correctPoints() {
     const { row, col, blockWidth, blockHeight } = this;
     const arr = [];
     for (let i = 0; i < row; i++) {
       for (let j = 0; j < col; j++) {
         arr.push({
           x: j * blockWidth,
           y: i * blockHeight,
           id: new Date().getTime() + Math.random() * 100,
         });
       }
     }
     return arr;
   },
   blockPoints() {
     const points = this.correctPoints;
     const length = points.length; //数组的长度
     const lastEle = points[length - 1]; //最后一个元素
     const newArr = [...points];
     newArr.length = length - 1;
     //打乱顺序
     newArr.sort(() => Math.random() - 0.5);
     newArr.push(lastEle);
     return newArr;
   },
 },
};
</script>
				

样式部分（Style），主要用于外观样式的设置，如下所示：

				
<style>
.puzzle {
 box-sizing: content-box;
 border: 2px solid #cccccc;
 position: relative;
}
.puzzle__block {
 border: 1px solid #ffffff;
 box-sizing: border-box;
 /* background-color: rebeccapurple; */
 position: absolute;
 transition: all 0.3s;
}
</style>
				

拼图组件的调用App.vue

首先组件需要引入和注册，采用使用，如下所示：

				
<script>
import puzzle from "./Puzzle";
export default {
 components: {
   puzzle,
 },
 data() {
   return {
     level: 0,
     puzzleConfig: [
       { img: "./img/001.jpg", row: 3, col: 3 },
       { img: "./img/002.jpg", row: 4, col: 4 },
       { img: "./img/003.jpg", row: 5, col: 5 },
       { img: "./img/004.jpg", row: 6, col: 6 },
       { img: "./img/005.jpg", row: 7, col: 7 },
     ],
     status: "进行中......",
   };
 },
 methods: {
   handleNext() {
     console.log("next");
     this.status = this.$refs.dpuzzle.status;
     this.level++;
     if (this.level == this.puzzleConfig.length - 1) {
       const answerFlag = window.confirm("已经是最后一关了，需要重新开始么？");
       if (answerFlag) {
         this.level = 0;
       }
     }
   },
   getStatus() {
     this.status = this.$refs.dpuzzle.status;
   },
 },
};
</script>
				

组件的调用，如下所示：

				
<template>
 <div>
   <h3>[拼图游戏]当前是第{{level+1}}关,当前状态[{{status}}]</h3>
   <puzzle ref="dpuzzle" @getStatus="getStatus" @next="handleNext" v-bind="puzzleConfig[level]" />
   <!-- <button @click="handleNext" style="width:20px,height:20px" value="下一关">下一关</button> -->
 </div>
</template>
				