vue-slick旋转木马-如何禁用上一个/下一个箭头按钮的点击

您可以添加 @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;
  }
}

但我们为什么不加一句 @单击.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插槽,如果通过了,他们会使用你的插槽。如果没有,他们将使用默认按钮。

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