vue在scss中引入js变量动态改变背景图片

适用场景

存在一块区域，根据不同的点击事件，显示不同的图片

关键步骤

1. js中以 --XXX 开头定义变量

注意：
图片需要通过 url 和 require 关键字引入
例如： ‘–image’: `url(${require(‘@/assets/img/pic1.png’)})`

2. scss中使用 var(--XXX) 变量

  .box {
    background: var(--image);
  }

整体代码

<template>
  <div>
    <el-button v-for="item in boxConfig" :key="item.id" @click="changePage(item.id)">{{ item.name }}</el-button>
    <div class="box" :style="boxStyle"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      boxConfig: [
        { id: 0, name:'图片1', src:`url(${require('@/assets/img/pic1.png')})`},
        { id: 1, name:'图片2', src:`url(${require('@/assets/img/pic2.png')})`},
        { id: 2, name:'图片3', src:`url(${require('@/assets/img/pic3.png')})`}
      ],
      boxStyle: { 
        '--width': '300px', 
        '--height': '300px',
        '--image': `url(${require('@/assets/img/pic1.png')})`
      }
    }
  },
  methods: {
    changePage(id) {
      const findItem = this.boxConfig.find(item=>item.id == id)
      this.$set(this.boxStyle, '--image', findItem.src)
    }
  }
}
</script>

<style lang="scss" scoped>

  .box {
    margin: 0 auto;
    width: var(--width);
    height: var(--height);
    background: var(--image);
  }
</style>

实现效果

点击图片1 ：

点击图片2 ：

点击图片3 ：