vue-slick-carousel - 如何禁用点击上一个/下一个箭头按钮

Question

我正在关注这个library，因为它做得很漂亮。

这是我目前的布局

我想禁用arrow-left 和arrow-right 按钮的点击方法，同时保留箭头，这样它就不会改变幻灯片或任何东西。怎么做？

代码沙盒：
https://codesandbox.io/s/naughty-matan-55c76?file=/src/components/HelloWorld.vue

Answer 1

您可以添加@click.stop 以停止事件传播。查看更多关于Event Modifiers的信息。

<VueSlickCarousel>
  ...
  <template #prevArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
  <template #nextArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
</VueSlickCarousel>

更新

禁用按钮的点击事件（不仅来自 img）。你可以用 css 做到这一点：

.arrow-btn {
  pointer-events: none;

  img {
    pointer-events: all;
  }
}

但是我们为什么不直接将@click.stop 添加到按钮而不是img 呢？

问题是here:

...

arrow = this.prevArrow ? (
  this.prevArrow(option)[0]
) : (
  <button type="button" data-role="none" style="display: block;">
    Next
  </button>
)
...

mergeVNodeData(arrow, 'on', {
  click: () => {
   if (clickable) {
     this.$emit('arrowClicked', { message: this.type })
   }
  },
})

首先它会检查您是否通过了 prevArrow 插槽，如果是，他们将使用您的插槽。如果没有，他们将使用默认按钮。

无论哪种方式，他们都会结合他们的默认道具/事件处理程序，其中包括“点击”事件，这意味着您的点击只会被覆盖。