Vue2.7组合式API：如何在antdv a-drawer头部插入元素

AI 小北

2026-7-20

解决Vue2.7中Ant Design Vue Drawer头部标题与自定义元素同行显示的问题

核心思路

Ant Design Vue的a-drawer组件的title插槽会完全替换默认的标题区域，你之前单独设置title属性再用插槽的方式会导致原标题被覆盖。正确做法是在title插槽内同时放置标题文本和自定义Swag元素，再通过CSS布局实现同行显示。

具体实现代码

<template>
  <a-drawer :visible="drawerVisible">
    <!-- 使用Vue2.7支持的v-slot缩写语法 -->
    <template #title>
      <div class="drawer-header-wrap">
        <span>TRANSCRIPT DRAWER</span>
        <div class="swag-block">Swag</div>
      </div>
    </template>

    <!-- Drawer内容区域 -->
    <div>Drawer content goes here</div>
  </a-drawer>
</template>

<script setup>
import { ref } from 'vue'

const drawerVisible = ref(true) // 控制Drawer显示状态
</script>

<style scoped>
.drawer-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 标题居左、Swag居右，可按需调整 */
  width: 100%;
}

.swag-block {
  /* 自定义样式示例 */
  color: #1890ff;
  font-weight: 600;
}
</style>

关键说明

Vue2.7支持Vue3的<script setup>语法和v-slot缩写（#title），无需再用旧的slot="title"写法，代码更规范。
外层容器drawer-header-wrap用flex布局是核心：align-items: center保证元素垂直居中，justify-content可根据需求调整水平分布（比如要让Swag紧跟标题，就改成justify-content: flex-start，再给Swag加margin-left: 16px）。
不要同时设置a-drawer的title属性和title插槽，插槽内容会完全覆盖默认标题，所有头部内容都要写在插槽内。