写bug的第一天，element plus中的Drawer抽屉的自定义标题title不显示

前言：公司最近整了一套新系统  BladeX企业级开发平台 说是方便后端开发
要求前端用带的框架开发  vue3.x + vite + element plus 

问题：产品提了一个需求点击表格中详情 出现左侧抽屉展示详情信息如图，自定义标题title想展示设备名称，但是自定义title却不显示（猜测可能是element的版本问题，毕竟框架都是用的稳定版的ui）

element plus版本

"element-plus": "^2.1.10",
"@element-plus/icons-vue": "^1.1.4",

//我的代码
<el-drawer v-model="visible"  size="50%" @open="drawerOpen">
  <template #header="{ close, titleId, titleClass }">
    <h2 :id="titleId" :class="titleClass">设备详情</h2>
  </template>
  <el-card shadow="always" class="box-card">
    <template #header>
      <div class="card-header">
        <span>基础信息</span>
        <el-button class="button"  plain>解绑</el-button>
      </div>
    </template>

  </el-card>
</el-drawer>
.....

//官网的例子
<template>
  <el-button @click="visible = true">
    Open Drawer with customized header
  </el-button>
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        Close
      </el-button>
    </template>
    This is drawer content.
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElDrawer } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'

const visible = ref(false)
</script>

解决方案

1.第一种把 #header还成#title 虽然官网标注#title遗弃

//在保持package.json中版本不改变element-plus的版本下 把#header还成#title就生效了
<el-drawer v-model="visible"  size="50%" @open="drawerOpen">
<!--      <template #header="{ close, titleId, titleClass }">-->
      <template #title="{ close, titleId, titleClass }">
        <h2 :id="titleId" :class="titleClass">设备详情</h2>
      </template>
      <el-card shadow="always" class="box-card">
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
            <el-button class="button"  plain>解绑</el-button>
          </div>
        </template>

      </el-card>
    </el-drawer>

2.第二种当然是升级element-plus的版本了，升级完版本 别忘了升级element的图标库，虽然不确定不升级会不会带来冲突或者啥问题 保险情况下还是升级一下吧

# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

//升级完版本
"@element-plus/icons-vue": "^2.1.0",
"element-plus": "^2.2.33",



<el-drawer v-model="visible"  size="50%" @open="drawerOpen">
<!--     <template #title="{ close, titleId, titleClass }">-->
  <template #header="{ close, titleId, titleClass }">
    <h2 :id="titleId" :class="titleClass">设备详情</h2>
  </template>
  <el-card shadow="always" class="box-card">
    <template #header>
      <div class="card-header">
        <span>基础信息</span>
        <el-button class="button"  plain>解绑</el-button>
      </div>
    </template>

  </el-card>
</el-drawer>

对了，结尾再说个问题 来自于官网的提示 不知道有没有和我一样不看tip的小伙伴，直到遇见问题再回来找

在 Vue 3 之后的版本 v-model 可以用于任何一个组件，`visible.sync` 已被移除，
请使用 `v-model="visibilityBinding"` 来控制抽屉组件的显示和隐藏状态。