naive UI 折叠面板设置折叠面板的可点击区域

我在使用naive UI 的折叠面板时，他有个特点，就是无论点击header的哪个位置，都会展开/折叠面板。且组件没有提供api设置可点击区域

这个特点会带来一个问题，比如如下场景：

由于我在header上设置的内容比较复杂，有按钮，导致这么一个问题，我点击自己的按钮，也会展开或折叠面板，那么就没办法友好的使用我自己的按钮了。

所以，我希望，只有点击左边的箭头图标时，才会展开或折叠面板。

解决方案

利用naive提供的受控模式，即点击面板的header之后，是否展开由我决定，而不是组件自己决定。

通过自定义那个箭头图标，并且给他添加点击方法，通过该点击方法去控制面板的折叠与展开，这样，就可以达到点击箭头图标来控制折叠面板了。

方法

<template>
    
    <n-collapse :expanded-names="collapseExpanded">
        
        <n-collapse-item :name="index" v-for="index in 5">
            
            <template #arrow>
                <n-icon @click="onItemHeaderClick(index)">
                    <IosArrowForward />
                n-icon>
            template>
            
            <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的其他位置，鼠标依然会变成小手，给人一种可点击的错觉，没找到可以修改该样式的方法。