时间戳

首页 > 解决方案 > 可以将基于类的样式转换为 VueJS 组件的内联样式吗？

javascript - 可以将基于类的样式转换为 VueJS 组件的内联样式吗？

问题描述

我正在尝试编写一个 VueJS 组件，然后将其转换为画布元素，以便可以将其作为图像下载。我正在使用库rasterizeHTML将我的 HTML 转换为画布。

这运作良好；但是，我发现该库不尊重 Vue 组件标签中编写的样式，但我设法使用内联样式使其工作。

这引出了我的问题：我更喜欢在我的单个文件组件的 Vue 标记中编写 CSS，但我正在寻找某种方法来将该 CSS 转换为内联样式。理想情况下，这将通过 Webpack 完成。有什么解决方案可以做到这一点吗？我正在寻找一种方法将 CSS 直接转换为每个组件的内联样式（不是通过计算的属性或方法），以便最简单地管理我的 CSS。

标签： javascriptvue.js

解决方案

您可以使用对象绑定创建内联样式。例如：

:style="{ background: 'black', color: textColor }"

在此示例中，背景颜色使用字符串文字，文本颜色使用实例上的属性。运行下面的代码片段并在 DevTools 中检查 HTML 以查看样式是否内联。 

new Vue({
  el: '#app',
  data() {
    return {
      textColor: 'yellow'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :style="{ background: 'black', color: textColor }">
  This div block uses inline styles which you can inspect in DevTools.
  The background color is a string literal and the text color uses a data property.
  </div>
</div>

推荐阅读