需求
做一个卡片,可以更换主题色,如下:
首先找你的UI切一张背景图,上面底色为白色,下面为透明色,透明部分用于显示修改颜色。
代码
<template>
<div class="card">
<span class="card-title" :style="bgStyle">背景图示例</span>
<div class="card-bg" :style="lnBgStyle"></div>
</div>
</template>
<script>
export default {
props: {
color: {
type: String,
default: '#E0E4FF'
},
},
computed: {
bgStyle() {
return {
backgroundColor: this.color,
}
},
lnBgStyle() {
// 获取上面那张背景图
const image = require('@/assets/image/card-chart.png')
// 设置背景图片和渐变 注意最后没有;
const bg = `url(${image}), linear-gradient(180deg, ${this.color} 0%, #fff 100%)`
return {
backgroundImage: bg,
}
},
},
}
</script>
<style lang="scss" scoped>
.card{
width: 400px;
height: 200px;
color: #333;
border: 1px solid #E0E4FF;
.card-bg {
width: 100%;
height: 80%;
background-repeat: no-repeat;
background-color: #fff;
background-size: 100%;
background-position-y: 10px;
}
}
</style>
很简单,需要注意的是,lnBgStyle如果没有生效,原因可能是图片获取方式有问题,或者是样式最后加了封号。
// 获取上面那张背景图
const image = require('@/assets/image/card-chart.png')
// 设置背景图片和渐变 注意最后没有;
const bg = `url(${image}), linear-gradient(180deg, ${this.color} 0%, #fff 100%)`
动态改变阴影box-shadow
要动态修改阴影,只能从box-shadow下手,让显示的阴影颜色比选择的颜色淡就ok。
由于传进来的颜色值有rgb的,rgba,以及#xxxxxx 三种形式,要是想修改opacity还要统一成rgba格式,然后修改a的值,这太麻烦了。
换个思路,调整box-shadow的阴影位置,只让淡的阴影显示出来就行了。
boxShadowStyle() {
return {
boxShadow: `8px 8px 20px -12px ${this.color}`
}
},