Question

我正在使用VueJs 2 + vuetify构建一个应用程序。我有一个带有按钮的弹出菜单，我希望每次出现该弹出窗口时都只能单击一次。

我尝试使用按钮上的@click.once，该按钮在第一次单击时效果很好，但是我找不到重置按钮的方法，因此当菜单再次显示。

<v-dialog
        v-model="dialogDeploy"
        width="500"
        persistent
        lazy
      >

...
            <v-btn
              color="success"
              flat
              :loading="loading"
              @click.once="deploySnapshot"
            >
              Deploy
            </v-btn>

dialogDeploy等于false，并切换到true以显示菜单，并在按下按钮时返回false。

正确的做法是什么？有没有办法重置once属性？

我知道另一种解决方案是使用 true / false 数据变量来设置按钮是否处于活动状态...但是我认为使用once属性也很好。 ..

谢谢

Answer 1

我不知道是否有更好的解决方案，但是当您需要再次启用click.once时，可以强制重新安装按钮。

要实现此目的，只需在按钮组件上添加key并增加它以重新安装。

这是一个简单的例子：

new Vue({
  el: "#app",
  data: {
    buttonKey: 1
  },
  methods: {
    clickOnceEvent() {
      alert('click.once!')    
    },
    enableClickOnce() {
      this.buttonKey++
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click.once="clickOnceEvent" :key="buttonKey">
  Click Once Button
  </button>
  <button @click="enableClickOnce">
  Re-enable Click Once
  </button>
</div>

Answer 2

您也可以使用可观察对象来实现这一目标。

随时重置计数，buttonClick$将再次发出count次点击事件。

在您的html中：

 <button ref="myButton">

在您的JavaScript中：

let count = 1;

button = this.$refs.myButton;
const buttonClick$ = fromEvent(button, 'click');

buttonClick$
    .pipe(take(count))
    .subscribe(() => console.log('clicked'));

单击后重新启用按钮@ click.once

2 个答案: