修改Ant Design Vue 折叠面板默认的收缩展开触发事件

Ant Design Vue版本：3.0.0-beta.9 因为3.0版本折叠面板新添加了collapsible属性，可以更好的实现需求。

需求场景

默认的折叠面板是点击头部任何一个部分都会收缩或者展开面板，我希望只有点击那个图标时才收缩或者展开，点击文字部分时，触发其他行为。

解决思路

1.利用插槽替换默认的header dom 2.利用插槽替换默认的图标 3.给自定义的header部分dom绑定点击事件，并且阻止事件冒泡，阻止父元素捕获事件就可以取消收缩展开事件了

代码部分

<a-collapse ghost :collapsible="'header'">
    <template #expandIcon></template>
    <a-collapse-panel key="1">
       <template #header>
          <span><CaretRightOutlined :style="{color: 'red'}" :rotate="90" /></span><span @click.stop>我是标题我是标题我是标题我是标题</span>
       </template>
       <p>{{ text }}</p>
     </a-collapse-panel>
</a-collapse>

collapsible属性是可以指定触发区域，2.0版本没有这个属性，虽然也可以借由这个方式实现需求，但是会有误触的情况出现，不过应该可以从样式入手弥补不足。