網站搜尋

javascript - Vue Typescript Konva。Canvas onClick 拋出「Uncaught SyntaxError: Function statements require a function name」


我懷疑這不是一個 Konva 專屬的問題,但由於我正在使用這個庫作為我的範例基礎,我想包含我代碼中最基本的部分來複現這個問題。

每當 onMouseDownHandler(在我的完整程式碼中還有 onMouseUpHandler)因點擊畫布而被觸發時,我的 Google 開發者工具控制台就會拋出錯誤 "Uncaught SyntaxError: Function statements require a function name",如下所示。

從閱讀文件中,我已經使用正確的語法編寫了這個。任何幫助都將不勝感激,因為我已經花了很多時間試圖解決這個問題。

<template>
  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
import Component, { mixins } from 'vue-class-component'
import Konva from 'konva'

@Component({
  name: 'MapCanvas'
})

export default class MapButtons extends Vue {
  stageSize = {
    width: window.innerWidth,
    height: window.innerHeight
  }

  onMouseDownHandler (e: any) : void {
    console.log('mouse down')
  }

}
</script>
<style scoped lang="scss">
.konva-stage {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

答案#1

我自己修好了!

  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler" <-- NOT THIS
    @mousedown="onMouseDownHandler" <-- THIS
  />