vue.js - Vue Font-awesome 图标连绑定(bind)

Question

我有一些类似于西蒙游戏的代码。当使用按钮作为箭头时，使用 @mousedown 事件一切正常。我想用很棒的字体图标来美化它，但在我换掉 <button> 后保持外观不变。对于 <icon> @mousedown 事件停止触发。其他一切似乎都一样。

来 self 的模板:

<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()
      }
    },

我有一些模糊的感觉它与组件的导入方式有关，所以我也包括了导入语句。如果您需要更多代码，完整的项目在这里。 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