在vue3里面引入九宫格报错

[LiZheGuang]

runtime-core.esm-bundler.js?5c40:1781 Uncaught (in promise) TypeError: Right-hand side of 'instanceof' is not an object

<template>
  <div class="draw">
    <LuckyGrid
      style="width: 265px; height: 200px"
      rows="3"
      cols="4"
      :blocks="[{ padding: '5px', background: '#ff4a4c', borderRadius: 10 }]"
      :prizes="[
        { x: 0, y: 0, fonts: [{ text: '0元', top: 20 }] },
        { x: 1, y: 0, fonts: [{ text: '1元', top: 20 }] },
        { x: 2, y: 0, fonts: [{ text: '2元', top: 20 }] },
        { x: 3, y: 0, fonts: [{ text: '3元', top: 20 }] },
        { x: 3, y: 1, fonts: [{ text: '4元', top: 20 }] },
        { x: 3, y: 2, fonts: [{ text: '5元', top: 20 }] },
        { x: 2, y: 2, fonts: [{ text: '6元', top: 20 }] },
        { x: 1, y: 2, fonts: [{ text: '7元', top: 20 }] },
        { x: 0, y: 2, fonts: [{ text: '8元', top: 20 }] },
        { x: 0, y: 1, fonts: [{ text: '9元', top: 20 }] },
      ]"
      :button="{ x: 1, y: 1, col: 2, fonts: [{ text: '抽奖按钮', top: 20 }] }"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Draw",
  data() {
    return {
      userId: "1231231231231221",
      userType: "",
      message: "",
      count: "",
      originId:
        process.env.DOMAIN_ENV == "dev" ? "gh_591ecf2e2417" : "gh_9fef032315c1",
    };
  },
});
</script>

<style lang="scss" scope="scope">
.demo {
  img {
    width: 250px;
  }
}
</style>

[buuing]

我看一下啊, 你是vue-cli@4.5初始化的vue3+ts吗

[buuing]

很抱歉, 目前短时间内无法支持ts项目, 当新版本支持ts之后, 我会第一时间在这里回复你

[LiZheGuang]

我看一下啊，你是vue-cli@4.5初始化的vue3+ts吗

@vue/cli 4.5.7 谢谢~

[LiZheGuang]

<script>
export default {
  data() {
    return {
      flag: true,
      prizes: [],
      button: {
        x: 1,
        y: 1,
        background: "#ff3a59",
        shadow: "0 5 0 #ea0125",
        fonts: [
          { text: "抽奖", fontColor: "#fff", top: "15%", fontSize: "30px" },
          {
            text: "消耗10积分",
            fontColor: "#fff",
            top: "65%",
            fontSize: "12px",
          },
        ],
      },
      blocks: [
        { padding: "10px", background: "rgba(0, 0, 0, 0)", borderRadius: 10 },
      ],
      defaultStyle: {
        gutter: 10,
        borderRadius: 8,
        fontColor: "#708abf",
        fontSize: "13px",
        textAlign: "center",
        background: "#ffffff",
        shadow: "0 5 0 #9cd2ff",
        speed: 10,
      },
      activeStyle: {
        fontColor: "#fff",
        background: "#ff3a59",
        shadow: "0 5 0 #ea0125",
      },
    };
  },
  mounted() {
    this.getPrizeList();
    setInterval((_) => {
      this.flag = !this.flag;
    }, 500);
  },
  methods: {
    getPrizeList() {
      // 模拟接口请求奖品列表
      setTimeout(() => {
        const data = [
          { name: "谢谢参与" },
          { name: "红包" },
          { name: "谢谢参与" },
          { name: "红包" },
          { name: "谢谢参与" },
          { name: "红包" },
          { name: "谢谢参与" },
          { name: "红包" },
        ];
        this.prizes = [];
        const axis = [
          [0, 0],
          [1, 0],
          [2, 0],
          [2, 1],
          [2, 2],
          [1, 2],
          [0, 2],
          [0, 1],
        ];
        for (let i = 0; i < 8; i++) {
          const item = data[i];
          this.prizes.push({
            name: item.name,
            index: i,
            x: axis[i][0],
            y: axis[i][1],
            fonts: [{ text: item.name, top: "63%" }],
            imgs: [{ src: item.img, width: "50%", top: "13%" }],
          });
        }
      }, 0);
    },
    startCallBack() {
      this.$refs.LuckDraw.play();
      setTimeout(() => {
        this.$refs.LuckDraw.stop((Math.random() * 8) >> 0);
      }, 2000);
    },
    endCallBack(prize) {
      alert(`恭喜你获得大奖: ${prize.name}`);
    },
  },
};
</script>

尝试关闭了TS，但还是相同的报错

[buuing]

尝试关闭了TS，但还是相同的报错

非常感谢反馈, 目前最新版v3.1.9已修复该问题, 是因为porps里面写成ts语法了, 竟然vue2.x可以兼容该语法

[LiZheGuang]

尝试关闭了TS，但还是相同的报错

非常感谢反馈，目前最新版本v3.1.9已修复该问题，是因为porps里面写成ts语法了，竟然vue2.x可以兼容该语法

大佬给力！会在下次尝试使用~