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>
相关推荐
幸运小圣1 小时前
Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】
前端·vue.js·vue
未来的嗒嘀嗒1 小时前
探秘Sketch及其替代者:设计软件精选指南
ui
计算机-秋大田2 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
墨笺染尘缘2 小时前
Unity——对RectTransform进行操作
ui·unity·c#·游戏引擎
fukaiit2 小时前
vue项目npm run serve出现【- Network: unavailable】(从排查到放弃)
npm·vue·node·win11
_处女座程序员的日常7 小时前
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
javascript·uni-app·vue
Python图像识别-113 小时前
基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)
python·yolo·ui
Xam_d_LM14 小时前
【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)
开发语言·c++·qt·ui·贴图·qt5
四喜花露水17 小时前
vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
前端·elementui·vue
松果猿18 小时前
Vite初始化Vue3+Typescrpt项目
vue