vue3 + naive ui card header 和 title 冲突 bug

三劫散仙2024-11-12 10:52

背景描述

最近发现一个 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>