Vue Font-awesome icon 甚至绑定答案

【问题标题】：Vue Font-awesome icon even bindingVue Font-awesome icon 甚至绑定
【发布时间】：2017-03-25 19:21:41
【问题描述】：

我有一些类似于西蒙游戏的代码。当使用箭头按钮时，使用@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()
      }
    },

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

【问题讨论】：

标签： vue.js

【解决方案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

【讨论】：