Vue.js：防止用户在使用 Vue <transition>转换元素时单击元素

Question

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

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

我已经尝试过将带有点事件的 css 类：none; 在过渡开始时应用于元素，但它在过渡期间没有停止点击。

例：

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

(其中doSomeAction设置应该显示为false(。

Answer 1

Vue 有事件修饰符可能会有所帮助。可能对您有帮助的特定方法是@click.once。如果将其添加到单击事件，则用户只能单击一次。它的文档在这里。

Answer 2

如果你使用的是 Vue.js 2.6+，你可以轻松做到。在这个次要的现实中添加了动态指令参数，因此您可以有条件地绑定所需的事件名称，或者在您的情况下禁用它(传递null(。

动态参数值应为字符串。但是，它会 如果我们允许null作为明确的特殊值，则很方便 指示应删除绑定。任何其他非字符串 值可能是错误，将触发警告。

参考。

// 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>

Answer 3

更新

如果还需要确保用户可以立即单击"穿过"要淡出到其后面项的元素，则可以向元素添加一个带有指针事件：none; 的类，然后执行以下操作：

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

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

请注意，指针事件：none;在某些非常旧的浏览器(IE <10(上不起作用