在Vue项目中使用打印插件如vue-print-nb时，可能会遇到组件样式（如el-checkbox）在打印时丢失的问题。为解决这个问题，可以针对特定组件（如.el_checkbox__input）添加`-webkit-print-color-adjust: exact;`，`-moz-print-color-adjust: exact;`和`color-adjust: exact;`这三行样式。这样做能够确保打印时样式正确显示，例如复选框的选中状态。
问题
当vue前端使用打印插件时（比如vue-print-nb）,偶尔会碰到无法打印出组件样式的情况，比如复选框el-checkbox。
实际选中情况
点击打印时的情况，没了√。
解决办法
找到对应的组件样式，比如复选框el-checkbox,找到.el_checkbox__input类，添加
.el-checkbox__input {
//添加以下三行即可在打印的时候出现相应的样式
-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
color-adjust: exact;
}
最终效果
扫一扫
6621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
