由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录)

Drawer 抽屉组件

Ant 官方文档-Drawer组件
原先我是用了第一个例子（基本用法，如下图）

但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成了@close。最后如下：

方便复制：👇

<a-drawer
	:visible="close"
	:closable="false"
	width="666px"
	placement="right"@close="close = false">
	<!-- 抽屉中的内容 -->
</a-drawer>

export default {
  data() {
    return {
      close: false,
    };
  },

Collapse折叠面板组件

Ant 官方文档-Collapse组件
这个例子我用了手风琴（如下图）

但是，很奇怪，这里需要点击两次才会展开，最后将v-model:activeKey改成:activeKey就解决了，两个组件都是v-model的问题，最后如下：


方便复制：👇

<a-collapse
	:activeKey="activeKey"
	accordion
    expandIconPosition="right"
    @change="changePanel">
        <template #expandIcon="{ isActive }">
          <div
            :class="isActive ? 'colloapse-icon-close' : 'colloapse-icon-open'"
          ></div>
        </template>
        <a-collapse-panel
          class="collapse"
          v-for="(item, index) in navList"
          :key="index + 1"
          :header="item.title"
          :style="customStyle"
          :class="activeKey == index + 1 ? 'red' : ''"
          :showArrow="item.children ? true : false"
        >
        <!--面板中的内容-->
        </a-collapse-panel>
 </a-collapse>

data() {
    return {
      activeKey: [],
      customStyle:
        "font-size:48px;opacity: 0.8;padding:60px 0;background:#fff;border:none",
    };
  },