Question

我有一些类似于Simon游戏的代码。当使用箭头按钮时，一切都使用@mousedown事件完美地完成。我想用字体真棒图标稍微修饰一下但保持外观相同，一旦我换出<button> <icon> @mousedown事件停止发射。其他一切看起来都是一样的。

从我的模板：

<div id="top-row">
  <icon name="arrow-left" class="but-0" v-bind:class="{ active: pushed0 }" aria-hidden="true" @mousedown="toneButtonPushed(0)"></icon>
  <icon name="arrow-left" class="but-1" v-bind:class="{ active: pushed1 }" aria-hidden="true" @mousedown="toneButtonPushed(1)"></icon>
</div>

toneButtonPushed甚至在这里：

methods: {
    toneButtonPushed: function (buttonPushed) {
      console.log('hit')
      if (this.compTurn === false) {
        if (buttonPushed === this.compTones[this.playerTone]) {
          const toneName = 'simonSound' + buttonPushed.toString()
          this.$refs[toneName].play()
          if (this.playerTone === this.compTones.length - 1) {
            if (this.compTones.length === this.winLevel) {
              this.msg = 'YOU WIN!!!!'
              setTimeout(() => {
                this.initGame()
              }, 2500)
            } else this.toggleTurn()
          } else {
            this.playerTone++
          }
        } else {
          if (this.strict === true) {
            this.$refs.wrong.play()
            this.initGame()
          } else {
            this.$refs.wrong.play()
            this.compTurn = true
            this.showTones()
          }
        }
      } else {
        this.$refs.wrong.play()
      }
    },

我有一些模糊的感觉，它与组件的导入方式有关，所以我也包括了import语句。如果您需要更多代码，整个项目就在这里。 https://github.com/CliffSmith25/simon

import Icon from 'vue-awesome/components/Icon.vue'

export default {
  name: 'app',
  data: function () {
    return {
      compTones: [],
      playerTone: 0,
      compTurn: true,
      intervalID: '',
      strict: false,
      winLevel: 20,
      pushed0: false,
      pushed1: false,
      pushed2: false,
      pushed3: false,
      msg: ''
    }
  },
  components: {
    Icon
  },

Answer 1

这有点棘手，因为标准事件不适用于自定义组件，因为当您执行以下操作时：

<mycomponent @click="method"></mycomponent>

组件正在寻找来自另一个组件的发出事件，它并不知道你指的是旧的DOM点击事件。

一个选项是在您的案例Icon.vue中从子组件发出点击事件，但这不是最佳解决方案

在事件中还有另外一个.native修饰符，如下所示：

<div id="top-row">
  <icon name="arrow-left" class="but-0" v-bind:class="{ active: pushed0 }" aria-hidden="true" @mousedown.native="toneButtonPushed(0)"></icon>
  <icon name="arrow-left" class="but-1" v-bind:class="{ active: pushed1 }" aria-hidden="true" @mousedown.native="toneButtonPushed(1)"></icon>
</div>

通过执行此操作，您说要使用来自DOM的标准mousedown事件的组件，并且它不会查找已发出的事件。

演示：http://jsbin.com/sanivevuxa/edit?html,js,console,output

Vue Font-awesome图标甚至绑定

1 个答案: