在 vue 中动态添加带有 css 变量的图像

Posted 2023-02-22

【中文标题】在 vue 中动态添加带有 css 变量的图像

【英文标题】：Dynamically add image with css variable in vue

【发布时间】：2020-10-08 10:46:32

【问题描述】：

我想动态地将表情符号图像附加到 vue 滑块上的旋钮上。我曾尝试使用 css 变量来执行此操作，但没有成功。 我也尝试了以下链接Vue.js dynamic <style> with variables，但仍然无法正常工作。

我已经安装了 'vue-range-slider' 并导入了 RangeSlider

范围滑块的设置方式如下。

<template>
  <div id="slider_div" >

  <range-slider
      class="slider"
      min="0"
      max="100"
  </range-slider>

 </div>
</template>

<script>
import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css';

export default 
  name: 'susScore',
  data: function() 
    return 
      emoji_data: "../assets/emoji_small.jpg",
    
  ,
  components: 
    RangeSlider
  

</script>

<style>
#slider_div
  margin-top: 95px;
  margin-left: 4%;


.slider
  width:200px;


.range-slider-knob 

我可以通过在旋钮上添加表情符号图像来添加表情符号。这是通过在模板标签之间或下面添加以下 css 来完成的。

<style >
    :root 
       --emoji_var: url("../assets/emoji_small.jpg");
     
  </style>

然后在 range-slider-knob css 类中我还添加了：background-image: var(--emoji_var)

   .range-slider-knob 
        background-image: var(--emoji_var)
   

到目前为止一切顺利。

虽然当我想动态添加图像时会出现问题。 我尝试通过将--emoji_var 变量更改为url('this.emoji_data') 来做到这一点，如下所示：

  <style >
    :root 
       --emoji_var: url('emoji_data'); 
     
  </style>

虽然这导致图像不会显示。

问题： 如何将 susScore 组件中的数据选项 (emoji_data) 中的值动态获取到 css 变量 (emoji_var) 中？

谢谢

【参考方案1】：

这可以在 Nuxt 应用程序中实现。在模板部分添加 <style> 标记并添加带有变量的 css。示例：

<template>
  <div>
    <div>
      <ToolbarMenu />
    </div>
    <style>
       :root 
         --main-bg-color:  this.colorFromData ;
       
       body 
           background-color: var(--main-bg-color)
      
    </style>
  </div>
</template>

<script>
export default 
  data() 
    return 
      colorFromData: 'blue',
    
  

</script>

【讨论】：

好的，谢谢您的回复。我想知道 ***.com/questions/47322875/… 的链接，在该问题的第一个答案中，作者解释说你可以做类似的事情，但他正在使用 Nuxt。这是否只有 Nuxt 才有可能，或者他为什么能够做到，而不是我？谢谢

我试试看

好的，为什么它在 Nuxt 中可以工作，但在其他情况下却不行？有什么区别？

我不知道幕后发生了什么，为什么它实际上会翻译样式，很奇怪，它不应该。