如何阻止Nuxt UI的UButton及其标签被打印？

在使用Nuxt 4.1.3和@nuxt/ui": "^4.2.1"时，我尝试让UButton组件在Chrome浏览器打印时隐藏，给组件添加了no-print类，并通过CSS的@media print规则设置隐藏：

UButton代码 #

<UButton class="mt-4 no-print" :ui="{
        label: 'no-print'
    }" size="md" color="primary" variant="solid">
        this text should not be shown when printing
    </UButton>

CSS代码 #

@media print {
.no-print,
.no-print * {
    display: none !important;
}
}

目前按钮本身已被隐藏，但按钮的文本（标签）依然会在打印时显示。

原因分析 #

这是Nuxt UI v4的已知问题：UButton的文本内容是通过内部默认插槽渲染的，你给UButton组件本身添加的类不会传递到插槽渲染的文本元素上。组件上的no-print类仅作用于UButton的外层容器，无法覆盖插槽内的文本节点，因此no-print *选择器无法选中这些文本，导致打印时文本依然可见。

解决方案 #

要解决这个问题，需要直接给插槽内的文本元素添加no-print类，比如将文本包裹在<span>标签中：

<UButton class="mt-4 no-print" size="md" color="primary" variant="solid">
    <span class="no-print">this text should not be shown when printing</span>
</UButton>

这样@media print规则就能同时隐藏按钮容器和内部的文本内容。

内容的提问来源于stack exchange，提问作者sandalwoodsh