时间戳

首页 > 解决方案 > vue-slick-carousel - 如何禁用点击上一个/下一个箭头按钮

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

问题描述

我正在关注这个库来制作光滑。

这是我目前的布局 在此处输入图像描述

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

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

标签： javascripthtmlcssvue.jsvue-slick-carousel

解决方案

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

<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 呢？

问题在这里：

...

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 插槽，如果是，他们将使用您的插槽。如果没有，他们将使用默认按钮。

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

推荐阅读