背景描述
最近发现一个 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>