Vue - 自定义Collapse标题（含点击动作）如何与折叠事件独立开

一. 问题现象

我们先来看一个动图：

我们在Collapse中，自定义了标题，定义了一个a标签以及一个checkbox。但是我们单独点击这两个按钮，会同时触发Collapse的折叠事件。那如何把两者分开呢？

首先看下案例代码：

<template>
<a-collapse :bordered="false" expand-icon-position="right" :expand-icon="expandIcon" >
  <!-- 自定义下拉图标 -->
  <template #expandIcon>
    <a @click="fold">{{ isFold ? "展开" : "收起" }}
      <DownOutlined v-if="isFold" />
      <UpOutlined v-else />
    </a>
  </template>
  <a-collapse-panel key="1" :header="flightCollapseTitle">
    <!-- 自定义标题 -->
    <template #header>
      <a href="#">测试点击</a>
      <a-checkbox>测试</a-checkbox>
    </template>
    自定义内容
  </a-collapse-panel>
</a-collapse>
</template>
<script lang="ts" setup>
	import { ref } from "vue";
	// 是否折叠(收起/展开)
	const isFold = ref(false);
	const fold = () => {
	  isFold.value = !isFold.value;
	};
</script>

二. 问题解决

给我们自定义的标题内容区域添加一个点击阻止事件@click.stop="showCollapse"：

<template #header>
  <div @click.stop="showCollapse">
    <a href="#">测试点击</a>
    <a-checkbox>测试</a-checkbox>
  </div>
</template>

添加之后，效果如下：