st-test-game v0.1.4

vue compoment

安装

yarn add st-test-game

template

<testGame ref="dpuzzle" @getStatus="getStatus" @next="handleNext" v-bind="puzzleConfig[level]" />

script

import "st-test-game/lib/test-game.css";
  import truck from "st-test-game";
  export default {
    components: {
      [truck.testGame.name]: truck.testGame,
    },
    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;
      },
    },
  };

不鼓励全局安装，因为这只是一个测试组件