在 vue js 中动态更改背景遮罩

Question

为了轻松实现“改变svg图标颜色”，我选择了使用蒙版的方式。像 :

<template>
  <div class="side_bar_button">
    <div class="colored" :style="cssVars" />
  </div>
</template>

<script lang="ts">
import {  Vue } from 'vue-property-decorator';

export default Vue.extend({
    props: {
        bgColor: {
            type: String,
            default: "#0099CC"
        }
    },
    computed: {
        cssVars() {
            return {
                '--bg-color': this.bgColor
            }
        }
    }
})
</script>

<style scoped>
.colored {
  background-color: var(--bg-color); /* defines the background color of the image */
  mask: url('../assets/icon/icon_about.svg') no-repeat center / contain;
  height: 50px;
}

这很复杂，但效果很好（除了我不能使用 @/assets/icon/icon_about.svg 作为路径，但是 ../assets/etc...）

我现在的目标是通过道具选择面具：

<template>
  <div class="side_bar_button">
    <div class="colored" :style="cssVars" />
  </div>
</template>

<script lang="ts">
import {  Vue } from 'vue-property-decorator';

export default Vue.extend({
    props: {
        bgColor: {
            type: String,
            default: "#0099CC"
            },
        imgSrc: {
            type: String
        }
    },
    computed: {
        cssVars() {
            return {
                '--bg-color': this.bgColor,
                '--mask-src': require('../assets/' + this.imgSrc)
            }
        }
    }
})
</script>

<style scoped>
.colored {
  background-color: var(--bg-color); /* defines the background color of the image */
  mask: url(var(--mask-src)) no-repeat center / contain;
  height: 50px;
}

不幸的是，我无法将 url() 与 var(--mask-src) 一起使用。

你有解决办法吗？

谢谢

Answer 1

好的知道了...

在 JS 中只需输入：

'--mask-src': "url(" + require('@/assets/' + this.imgSrc) + ")"

并在 CSS 中：

mask: var(--mask-src) no-repeat center / contain;

在 vue js 中动态更改背景遮罩

Change dynamically background mask in vue js

svg

mask

background-color

vue.js