vue+element项目，通过使用slider改变图片的遮罩浓度与模糊度，使用js控制scss的值

1.动图演示

2.页面布局

分析：通过使用slider滑动触发函数，改变scss中定义的值，将scss的值放入:root中，通过var来渲染这个值，并且使用js可以直接改变scss中:root定义的内容

注意：对于模糊度的改变，我设置的最大值是20px，如果想要更大的可以自己设置，不过建议不要太大否则会留白，并且`transform: scale(1.1);`便是解决模糊之后四边留白的问题，一定不能丢

<template>
<div
        @mouseover="handleMouseover"
        @mouseleave="handleMouseout"
        class="bzgxh"
      >
        <p v-show="showP">更换壁纸</p>
        <div class="gxhimg">
          <img src="../../assets/zgh/zgh_bg.png" alt="" />
        </div>
      </div>
      <div class="bzsx">
        <span class="demonstration">遮罩浓度</span>
        <el-slider @input="sliderzzndchange" v-model="hkvalue.zznd"></el-slider>
        <p>{{ `${hkvalue.zznd}%` }}</p>
      </div>
      <div class="bzsx">
        <span class="demonstration">模糊度</span>
        <el-slider @input="slidermhdchange" v-model="hkvalue.mhd"></el-slider>
        <p>{{ `${hkvalue.mhd}%` }}</p>
      </div>
</template>
<script>
export default {
  data() {
    return {
      hkvalue: {
        zznd: 90,
        mhd: 0,
      },
      bjvalue: {
        hs: 2,
        ls: 5,
        hjj: 30,
        ljj: 9,
        tbdx: 0,
      },
      tbvalue: {
        tbyj: 10,
        tbtmd: 20,
        tbdx: 0,
      },
      showP: false,
      yctb: false,
      tbyy: false,
    };
  },
  methods: {
    sliderzzndchange(data) {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--filter-brightness", `${data}%`);
    },
    slidermhdchange(data) {
      let num;
      if (data > 0) {
        num = parseFloat((20 / 100) * data).toFixed(1);
      } else {
        num = data;
      }
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--filter-blur", `${num}px`);
    },
    handleMouseover() {
      this.showP = true;
    },
    handleMouseout() {
      this.showP = false;
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.bzgxh {
  // border: 1px solid red;
  position: relative;
  &:hover {
    cursor: pointer;
  }
  .gxhimg {
    width: 50%;
    margin: auto;
    overflow: hidden;
    img {
      width: 100%;
      display: block;
      filter: blur($filter-blur) brightness($filter-brightness);
      transform: scale(1.1);
    }
  }
  p {
    width: 120px;
    cursor: pointer;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background: rgba($color: #000000, $alpha: 0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -20px;
    z-index: 2;
  }
}
.bzsx {
  width: 80%;
  margin: 16px auto;
  display: flex;
  // height: 40px;
  .demonstration {
    display: block;
    line-height: 40px;
    width: 16%;
    text-align: right;
  }
  .el-slider {
    width: 65%;
    margin-left: 30px;
    margin-right: 10px;
  }
  p {
    height: 40px;
    line-height: 40px;
    margin: 0px;
  }
}
.tbhk {
  width: 100%;
  // border: 1px solid red;
  height: 30px;
  display: flex;
  .el-slider {
    width: 65%;
    margin-right: 10px;
  }
  p {
    line-height: 40px;
    margin: 0px;
  }
}
</style>

 3.scss设置

这个便是上面文件引入的scss文件内容，可以根据自己的scss文件地址把上面整个代码地址替换，然后引入这个scss文件

:root {
  --filter-blur: 20px;
  --filter-brightness: 90%;
}

$filter-blur: var(--filter-blur);
$filter-brightness: var(--filter-brightness);