vue如何動態(tài)設置背景漸變色

更新時間：2024年08月28日 11:07:42 作者：迪爾~

這篇文章主要介紹了vue如何動態(tài)設置背景漸變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue動態(tài)設置背景漸變色

效果展示

核心（動態(tài)更換單一的背景顏色也可以使用）

<div class="ss" v-bind:style="{ background: colors }"></div>
//漸變色顏色代碼
 // background:linear-gradient(90deg,#0af,#0085ff);

代碼

<template>
  <div>
    <el-row :gutter="20">
      <!-- 兩邊左側(cè)邊框空位 無用 -->
      <el-col :span="4"><div class="frame"></div></el-col>
      <!-- 中間左側(cè)邊框背景顏色選擇器 主要代碼 -->
      <el-col :span="8">
        <div class="middle">
          <ul class="middle-ul">
            <li class="middle-li">
              背景顏色1:
              <el-color-picker
                size="mini"
                v-model="colors1"
                show-alpha
                color-format=" hsv "
                :predefine="predefineColors"
                @change="firstChangeColor"
              >
              </el-color-picker>
            </li>
            <li class="middle-li">
              背景顏色2:
              <el-color-picker
                size="mini"
                v-model="colors2"
                show-alpha
                color-format=" hsv "
                :predefine="predefineColors"
                @change="secondChangeColor"
              >
              </el-color-picker>
            </li>
          </ul>
        </div>
      </el-col>
      <!-- 中間右側(cè)邊框效果展示區(qū) 主要代碼 -->
      <el-col :span="8">
        <div class="middle">
          <div class="ss" v-bind:style="{ background: colors }">
            <ul class="middle-ul">
              效果展示
            </ul>
          </div>
        </div>
      </el-col>
      <!-- 兩邊右側(cè)邊框空位 無用 -->
      <el-col :span="4"><div class="frame"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // <--主要代碼
      colors1: "",
      colors2: "",
      colors: "",
      // 主要代碼-->
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#c7158577",
      ],
    };
  },
   // <--主要代碼
  methods: {
    firstChangeColor(val) {
      this.colors1 = val;
          if (Object.keys(this.colors2).length == 0) {
        this.$message({
          message: "請選擇顏色2",
          type: "warning",
        });
      } else {
        this.colors =  "linear-gradient(90deg," + this.colors1 + "," + this.colors2 + ")";
      }
    },

    secondChangeColor(val) {
      this.colors2 = val;
      if (Object.keys(this.colors1).length == 0) {
        this.$message({
          message: "請選擇顏色1",
          type: "warning",
        });
      } else {
        this.colors = "linear-gradient(90deg," + this.colors1 + "," + this.colors2 + ")";
      }
    },
  },
   // 主要代碼-->
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.middle {
  border-radius: 4px;
  min-height: 250px;
  background: #fdfdfd;
}

.frame {
  border-radius: 4px;
  min-height: 250px;
  background: #f0f2f5;
}
.ss {
  float: left;
  margin-top: 25px;
  margin-left: 100px;
  width: 300px;
  height: 200px;
  border-radius: 19px;
}
.middle-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.middle-li {
  margin-left: 25px;
  list-style: none;
  line-height: 40px;
}
</style>