Question

我在使用Vue.js样式化的组件上打印背景时遇到麻烦。

我的JS小提琴可在以下网址找到：https://jsfiddle.net/9Lwekx4g/

我的HTML看起来像：

  <div id="bocks" v-bind:style="{backgroundColor: bgcol}">
  </div>

背景样式按预期工作。默认颜色应该是红色，即您加载页面时的外观。但是，当您在Chrome上打印屏幕时，背景颜色为白色。

我了解到，如果我将背景色设置为!important，它将显示在打印屏幕上。但是，如果我想多次更改颜色，例如在changec函数上，这将成为一个问题。

Answer 1

这不是[Vue.js]相关问题。
您不应在浏览器中强制打印背景颜色和图像。

但是，这是一种解决方法，我不建议这样做。

.foo {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-print-color-adjust: exact;
}

<div class="foo"></div>