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>
添加之后,效果如下:
更多推荐
已为社区贡献4条内容
所有评论(0)