Vue.js：防止用户在使用 Vue <transition> 过渡时点击元素答案

【问题标题】：Vue.js: prevent user clicking on element while it is being transitioned with Vue <transition>Vue.js：防止用户在使用 Vue <transition> 过渡时点击元素
【发布时间】：2019-12-04 23:47:43
【问题描述】：

我正在开发一个 Vue.js 项目，当我单击一个元素时，我正在使用 Vue 过渡标签将其淡出。问题是由于元素正在淡出，它仍然是可点击的，这在我的应用程序中可能会导致问题。

我的问题是：如何在过渡期间使元素不可点击，以便用户在过渡完成之前不会多次单击它？

我已经尝试过使用带有点事件的 CSS 类：无；过渡开始时向右的元素，但在过渡期间它没有停止点击。

例子：

<transition name="fade">
  <div v-if="shouldShow" @click="doSomeAction">Example text</div>
</transition>

（其中 doSomeAction 将 shouldShow 设置为 false）。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

更新

如果您还需要确保用户可以立即“通过”正在淡出到其后面的项目的元素，您可以添加一个带有 pointer-events: none; 的类到元素，然后执行以下操作：

this.$nextTick(() => {
  this.shouldShow = false;
});

这将确保在添加类之前不会发生淡入淡出。 this.$nextTick 是一个 Vue 函数，它在运行回调之前等待 dom 更新（在本例中是添加指针事件类）：https://vuejs.org/v2/api/#Vue-nextTick

注意指针事件：无；不适用于一些非常旧的浏览器（IE

【讨论】：

【解决方案2】：

如果您使用的是 Vue.js 2.6+，您可以轻松完成。在这个较小的实际中添加了动态指令参数，因此您可以有条件地绑定所需的事件名称，或者在您的情况下禁用它（传递null）。

动态参数值应为字符串。然而，它会如果我们允许 null 作为一个明确的特殊值表示应该删除绑定。任何其他非字符串值可能是错误的，会触发警告。

Reference。

// using computed property
<transition name="fade">
  <div v-if="shouldShow" @[event]="doSomeAction">Example text</div>
</transition>

export default {
  data() {
    return {
       shouldShow: true
     }
  },
  computed: {
    event() {
      return this.shouldShow ? "click" : null;
    }
  }
}

// using object
<transition name="fade">
  <div v-if="shouldShow" v-on="{ [shouldShow ? 'click' : null]: doSomeAction }">Example text</div>
</transition>

【讨论】：

这是一个很好的答案！它比给出的“click.once”答案要冗长一些，但它仍然很有帮助。

【解决方案3】：

Vue 有可能对此有所帮助的事件修饰符。可能对您有帮助的具体是@click.once。如果将此添加到单击事件中，则用户将只能单击一次。它的文档是here。

【讨论】：