我使用的插件会创建动态html,我想使用通过props传递的十六进制添加动态background-color

这是我组件中的html

<template>
  <div class="pagination" slot="pagination"></div>
</template>


生成动态HTML

<div class="pagination" slot="pagination">
  <span class="swiper-pagination-bullet"></span>
  <span class="swiper-pagination-bullet"></span>
</div>


组件接收道具

props: ['primaryBgColor']


如果我写的话,我显然可以在模板中看到颜色

<template>
  <div>
    {{ this.primaryBgColor }}
  </div>
</template>


但是当我在组件中编写样式时

<style>
  .swiper-pagination-bullet {
    background-color: {{ this.primaryBgColor }}
  }
</style>


Webpack返回一个错误,说我有CSS语法错误。有任何想法吗?

最佳答案

在模板中,您可以直接注入样式

<template>
  <div :style="this.primaryBgColor">
    {{ this.primaryBgColor }}
  </div>
</template>


primaryBgColor应该包含{'background':"#cccc"}之类的对象

对于更多选择,vuejs具有出色的文档。您可以参考https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

我们可以查询元素并应用样式,如下所示

mounted: function () {
      var elems = document.querySelectorAll('.swiper-pagination-bullet ')
      var index = 0
      var length = elems.length
      for (; index < length; index++) {
        elems[index].style.backgroundColor = this.primaryBgColor
      }
    },

07-24 09:46
查看更多