vue-slick-carousel如何禁用prev/next箭头按钮的点击事件且保留箭头显示

以下两种方案均可实现仅保留箭头显示、禁用点击切换的需求：

方案1：CSS样式禁用（最简实现） #

直接通过样式禁止箭头元素响应鼠标点击事件，无需修改组件逻辑：

/* 若你的样式加了scoped属性，需要使用深度选择器 */
/* Vue3环境 */
::v-deep .arrow-left,
::v-deep .arrow-right {
  pointer-events: none;
}

/* Vue2环境 */
/deep/ .arrow-left,
/deep/ .arrow-right {
  pointer-events: none;
}

方案2：自定义箭头组件（更灵活可控） #

替换库默认的箭头组件为自定义无点击事件的静态元素，完全控制箭头行为：

<template>
  <VueSlickCarousel
    :prevArrow="CustomPrevArrow"
    :nextArrow="CustomNextArrow"
    <!-- 保留你原有其他配置项 -->
  >
    <!-- 保留你原有轮播内容 -->
  </VueSlickCarousel>
</template>

<script setup>
import { h } from 'vue'
// 自定义左箭头，仅渲染样式无点击逻辑
const CustomPrevArrow = h('div', { class: 'arrow-left' }, '←')
// 自定义右箭头，仅渲染样式无点击逻辑
const CustomNextArrow = h('div', { class: 'arrow-right' }, '→')
</script>

内容的提问来源于stack exchange，提问作者CCCC