我在使用naive UI 的折叠面板时,他有个特点,就是无论点击header的哪个位置,都会展开/折叠面板。且组件没有提供api设置可点击区域
这个特点会带来一个问题,比如如下场景:
由于我在header上设置的内容比较复杂,有按钮,导致这么一个问题,我点击自己的按钮,也会展开或折叠面板,那么就没办法友好的使用我自己的按钮了。
所以,我希望,只有点击左边的箭头图标时,才会展开或折叠面板。
解决方案
利用naive提供的受控模式,即点击面板的header之后,是否展开由我决定,而不是组件自己决定。
通过自定义那个箭头图标,并且给他添加点击方法,通过该点击方法去控制面板的折叠与展开,这样,就可以达到点击箭头图标来控制折叠面板了。
方法
<template>
<!-- 使用expanded-names参数开启受控模式 -->
<n-collapse :expanded-names="collapseExpanded">
<!-- 面板子项的name和onItemHeaderClick的入参必须保持一致 -->
<n-collapse-item :name="index" v-for="index in 5">
<!-- 设置自定义图标,并且添加点击方法 -->
<template #arrow>
<n-icon @click="onItemHeaderClick(index)">
<IosArrowForward />
</n-icon>
</template>
<!-- header中包含button -->
<template #header>
<n-descriptions>
<n-descriptions-item>
<template #label>操作</template>
<n-space>
<n-button size="small">修改</n-button>
<n-button size="small">删除</n-button>
</n-space>
</n-descriptions-item>
</n-descriptions>
</template>
</n-collapse-item>
</n-collapse>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { IosArrowForward } from "@vicons/ionicons4"; // 引入自定义的箭头图标
const collapseExpanded = ref(new Array<number>()); // 数组里包含的,就是展开的面板子项的name
// 箭头图标的点击方法,入参数面板子项的name
function onItemHeaderClick(index: number) {
// 由于我们并不知道本次点击面板是要折叠还是展开,所以需要搜索看看collapseExpanded里面有没有,有的话就说明要折叠
const findIndex = collapseExpanded.value.findIndex(
(item) => item == index
);
// 判断是折叠还是展开
if (findIndex >= 0) {
collapseExpanded.value.splice(findIndex, 1);
} else {
collapseExpanded.value.push(index);
}
}
</script>
<style lang="scss" scoped></style>
不足
鼠标放到header的其他位置,鼠标依然会变成小手,给人一种可点击的错觉,没找到可以修改该样式的方法。