Question

我使用vue.js来处理一些按钮点击并运行一个方法。所以像

这样的按钮

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>

将运行此方法就好了：

photo: function(){

   if( vm.photoButton == 'Next, Declare Your Goal')
   {
        photoUpload();                 
    } else {
        sliderSignup.unslider('next');
    }

 }

问题是双击可以运行sliderSignup.unslider('next');两次跳过两张幻灯片，不好。我知道你可以在点击按钮时使用jquery函数.one()，但我使用的是Vue。我怎么能只运行一次这个功能，或者每隔10秒运行一次，这样你就不能快速双击真实？我看了很多，只看到$('#element').one('click' function(){})通过jquery选项，这对我不起作用。

Answer 1

根据Vue Event-Modifiers，您可以使用：.once

更改您的代码：

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>

为：

<button id="signup-photo-button" v-on:click.once="photo">{{ photoButton }}</button>

使用Vue版本1，您可以使用如下的变量：

＆＃13;

new Vue({
  el: '#example-2',
  data: {
    isAlreadyClicked: true,
    photoButton: 'button demo'
  },
  methods: {
    photo: function (event) {
      if (this.isAlreadyClicked) {
        this.isAlreadyClicked = false;
        console.log('do your stuff');
      } else {
        console.log('already clicked. Do nothing');
      }
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>

<div id="example-2">
    <button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>
</div>

＆＃13;

Answer 2

关注@baao想法

 photo: function(){

       if( vm.photoButton == 'Next, Declare Your Goal')
       {
            photoUpload();                 
        } else {
            document.getElementById('signup-photo-button').disabled = true;
            setTimeout(function() {
                 document.getElementById('signup-photo-button').disabled = false; 
    }
,10000);
            sliderSignup.unslider('next');
        }
     }

每按一次javascript运行一次功能点击

2 个答案: