在vue3里面引入九宫格报错 about lucky-canvas

[buuing]

我看一下啊, 你是[email protected]初始化的vue3+ts吗

[buuing]

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

[LiZheGuang]

我看一下啊，你是[email protected]初始化的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可以兼容该语法

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