vue如何动态设置背景渐变色

 更新时间:2024年08月28日 11:07:42   作者:迪尔~  
这篇文章主要介绍了vue如何动态设置背景渐变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue动态设置背景渐变色

效果展示

核心(动态更换单一的背景颜色也可以使用)


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

代码

<template>
  <div>
    <el-row :gutter="20">
      <!-- 两边左侧边框空位 无用 -->
      <el-col :span="4"><div class="frame"></div></el-col>
      <!-- 中间左侧边框背景颜色选择器 主要代码 -->
      <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>
      <!-- 中间右侧边框效果展示区 主要代码 -->
      <el-col :span="8">
        <div class="middle">
          <div class="ss" v-bind:style="{ background: colors }">
            <ul class="middle-ul">
              效果展示
            </ul>
          </div>
        </div>
      </el-col>
      <!-- 两边右侧边框空位 无用 -->
      <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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用Swiper踩坑解决避坑

    vue使用Swiper踩坑解决避坑

    这篇文章主要为大家介绍了vue使用Swiper踩坑及解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 深入浅析Vue组件开发

    深入浅析Vue组件开发

    本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友参考下吧
    2016-11-11
  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    这篇文章主要介绍了一份超级详细的Vue-cli3.0使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue中.env文件配置环境变量的实现

    vue中.env文件配置环境变量的实现

    本文主要介绍了vue中.env文件配置环境变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • element的表单元素使用总结

    element的表单元素使用总结

    表单元素挺多的,本文主要介绍了element的表单元素使用总结,主要包括文本框类、选择类、其他类,有一定的参考价值,感兴趣的可以了解一下
    2021-06-06
  • vue如何实时往数组里追加数据

    vue如何实时往数组里追加数据

    这篇文章主要介绍了vue如何实时往数组里追加数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue在table表中悬浮显示数据及右键菜单

    vue在table表中悬浮显示数据及右键菜单

    这篇文章主要为大家详细介绍了vue在table表中悬浮显示数据及右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图的操作代码

    vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图的操作代码

    这篇文章主要介绍了vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • 详解vue微信网页授权最终解决方案

    详解vue微信网页授权最终解决方案

    这篇文章主要介绍了 详解vue微信网页授权最终解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue3+ts如何通过lodash实现防抖节流详解

    vue3+ts如何通过lodash实现防抖节流详解

    loadsh是一个工具库,我们通常使用loadsh的debounce函数处理防抖,下面这篇文章主要给大家介绍了关于vue3+ts如何通过lodash实现防抖节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论