Question

我正在研究Vue.js项目，当我单击某个元素时，我正在使用Vue过渡标签将其淡出。问题在于，随着该元素逐渐淡出，它仍然可以单击，这在我的应用程序中可能会引起问题。

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

我已经尝试将css类与指向事件一起使用：none;过渡开始时将其移到该元素的右侧，但在过渡期间并没有停止点击。

示例：

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

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

Answer 1

Vue具有事件修改器可能对此有所帮助。可能对您有帮助的特定设备是@ click.once。如果将其添加到click事件中，则用户只能单击一次。其文档为here。

Answer 2

如果您使用的是Vue.js 2.6+，则可以轻松实现。在此次要情况下，添加了 Dynamic指令参数，因此您可以有条件地绑定所需的事件名称，或者在情况下将其禁用（通过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>

Answer 3

更新

如果您还需要确保用户可以立即单击淡入淡出的元素到其后面的项目，则可以向指针事件添加 pointer-events：none; 的类。元素，然后执行以下操作：

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

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

请注意，指针事件：无；在某些非常老的浏览器（IE <10）上不起作用

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

3 个答案: