vue怎样动态设置背景渐变色

2024-11-2 22:43| 发布者: 76a9| 查看: 29| 评论: 0

摘要: 目录vue动态设置背景渐变色结果展示焦点（动态更换单一的背景颜色也可以使用）代码总结vue动态设置背景渐变色结果展示焦点（动态更换单一的背景颜色也可以使用） [code]<div class="ss" v-bind:style="{ backgro

vue动态设置背景渐变色

结果展示

焦点（动态更换单一的背景颜色也可以使用）

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

代码

[code]<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>[/code] [code]<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>[/code] [code]<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>[/code]

总结

以上为个人履历，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/326621pec.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Html5同时支持多端sdk的小技巧下一篇：vue3+echarts实现渐变色环形图过程

账号		自动登录	找回密码
密码			立即注册

vue怎样动态设置背景渐变色

目录

vue动态设置背景渐变色

结果展示

焦点（动态更换单一的背景颜色也可以使用）

代码

总结

相关分类

站长推荐 /6