Vue - 动态改变CSS变量值实现class样式值的动态变化教程（--变量）

2024-04-30 发布：hangge 阅读：115

CSS 变量允许我们在样式表中定义一些值，然后在整个应用中轻松地重复使用和修改这些值。本文通过样例演示在 Vue 中，如何使用绑定机制来动态地改变 CSS 变量值从而实现动态地改变样式的目的。

1，运行效果

（1）页面上方是一个 slider 滑块组件，下方是一个带有小三角形的消息提示框。

（2）当拖动滑块时，消息提示框的三角形的垂直位置会动态地改变。

2，样例代码

三角形通过消息框的伪元素 ::before 和 ::after 实现。滑块的值（value1）与消息框的三角形位置关联，通过 CSS 变量（--arrowTopValue）实现动态调整，拖动滑块时，消息框的三角形位置会相应改变。

注意：变量前要加--

<template>
  <div class="block">
    <el-slider v-model="value1" :min="0" :max="90" style="width: 300px"></el-slider>
    <div class="message-container" :style="{ '--arrowTopValue' : value1 + 7 + 'px' }">
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value1: 0
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  /* 消息框样式 */
  .message-container {
    width: 260px;
    margin: 20px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.125rem;
    border-color: rgb(154, 223, 223);
    background-color: white;
    filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 2px)
      drop-shadow(rgba(0, 0, 0, 0.06) 0px 1px 1px)
  }

  /* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
  .message-container::before, .message-container::after {
      content: "";
      position: absolute;
      top: var(--arrowTopValue, 20px); /** 设置三角箭头在垂直方向上的位置 */
      border-width: 7px;
      border-style: solid;
      transform: translateY(-50%);
  }

  /* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
  .message-container::before {
      left: -14px;
      border-color: transparent #9ADFDF transparent transparent;
  }

  /* 消息框伪元素 ::after 设置上层三角颜色为白色 */
  .message-container::after {
      left: -13px; /* 与上面的left值相差1px，实现绿色边框效果 */
      border-color: transparent white transparent transparent;
  }
</style>