动态设置卡片的主题色

需求

做一个卡片，可以更换主题色，如下：

首先找你的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}`
	}
},