动态设置style参数

记录日常项目开发中的一些功能实现方法，总结下来已便后期查阅。

for循环设置随机色

• 首先在methods中定义生成随机颜色的方法

  randomRgb(item) {
    const R = Math.floor(Math.random() * 255)
    const G = Math.floor(Math.random() * 255)
    const B = Math.floor(Math.random() * 255)
    return `rgba(${R},${G},${B},0.8)`
  }
  

• 使用方法一：直接在行内设置

  <ul class="headBox">
    <li
      v-for="(item, index) in projectList"
      :key="index"
      :style="{backgroundColor: randomRgb(item)}"
    >
      <div>{{ item.project_name }}</div>
    </li>
  </ul>
  

• 使用方法二：修改style参数

  <!--html-->
  <ul class="headBox">
    <li
      v-for="(item, index) in projectList"
      :key="index"
      ref="liref"
      @mouseover="mouseliover(index, randomRgb(item))"
    >
      <div>{{ item.project_name }}</div>
    </li>
  </ul>
  
  <!--鼠标移入修改颜色-->
  mouseliover(Index, Color) {
    this.$refs.liref[Index].style.setProperty('--lilili', Color)
  }
  
  <!--style-->
  li{
      &:hover {
          background: #fff!important;
          cursor: pointer;
          color: var(--lilili); // 设置随机色
          &:before,
          &:after {
            width: 100%;
            transition: 600ms ease all;
            background-color: var(--lilili); // 设置随机色
          }
      }
  }
  

总结

知识点：CSS var() 函数

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

语法：var(custom-property-name, value)

使用：先定义一个名为：“--***”的属性，然后使用var()函数调用该属性

CSSStyleDeclaration setProperty() 方法

setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。

object.setProperty(propertyname, value, priority)