vue3 + naive ui card header 和 title 冲突 bug

背景描述

最近发现一个 naive ui 上的问题，之前好好的，某一次升级后就出现了一个 bug，Modal 使用 card 布局后，Header Solt 下面的内容不见了，变成了 title，因为这个 solt 里面是有操作 action 的，现在变成了 title 的文字覆盖了这块内容，在本地复现后，发现 naive-ui 高版本存在这个问题，因为 package.json 里面并没有锁定naive-ui 版本，所以每次升级发布后，npm 可能就会安装当前最新的版本。

问题排查

知道了是那个部件那个属性的问题就好办了，知道上官网 github issue 一搜，果然已经有人反馈了：

card卡片 属性title与header Slot同时使用header无法显示 · Issue #5987 · tusen-ai/naive-ui · GitHub

但官网还没有修复这个 issue，所以临时办法就先把之前加的 title 属性移除掉即可。

修复 TSX 代码

                <NModal class="bg-gray-400 text-black min-h-screen"headerStyle={{height:"60px"}}footerStyle={{height:"60px"}}preset={"card"}  theme-overrides={{peers: {Card: {titleTextColor: "black"}}}}// show={this.$props.show}  onClose={this.hideModal} title={"演示例子"}  >//去掉这个 title 字段即可   show={this.$props.show}  onClose={this.hideModal}  > {{default: () => (<div class="h-[800px] overflow-auto "><div class=" bg-green-100 whitespace-pre-wrap  overflow-auto"v-html={this.beforeData}></div><div class=" bg-orange-200" v-html={decodeURIComponent(this.$props.row.message)}></div><div class=" bg-blue-100 whitespace-pre-wrap  overflow-auto"v-html={this.afterData}></div></div>),'header': () => (<NSpace><div><NInputNumber v-model:value={this.beforeLimit} placeholder="上翻值" class="w-[120px]" min={10} max={300} /></div><NButton onClick={()=>this.handleContextQueryClick(true)} type={"info"}>上翻检索</NButton></NSpace>),'footer': () => (<NSpace><div><NInputNumber v-model:value={this.afterLimit} placeholder="下翻值" class="w-[120px]" min={10} max={300} /></div><NButton onClick={()=>this.handleContextQueryClick(false)} type={"primary"}>下翻检索</NButton></NSpace>)}}</NModal>