Vue字体渐变封装

Vue字体渐变封装

vue2

支持传入渐变颜色，字体大小，其它样式选项

<template>
  <div class="gradient" :style="styles">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "gradientDiv",
  props: {
    colors: {
      type: Array,
      default: () => ["yellow", "green", "red", "blue"],
    },
    fontSize: {
      type: String,
      default: "27px",
    },
    styleOptions: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      styles: {
        background: "",
        "-webkit-background-clip": "text",
        color: "transparent",
        fontSize: this.fontSize,
      },
    };
  },
  methods: {
    handleGradient(val) {
      let str1 = "linear-gradient( 90deg,";
      let str2 = ")";
      let str = "";
      for (let i = 0; i < val.length; i++) {
        if (i === 0) {
          str = val[0] + ",";
        } else if (i == val.length - 1) {
          str = str + val[i];
        } else {
          str = str + val[i] + ",";
        }
      }
      return str1 + str + str2;
    },
  },
  watch: {
    colors: {
      handler(val) {
        this.styles.background = this.handleGradient(val);
      },
      deep: true,
      immediate: true,
    },
    fontSize: {
      handler(val) {
        this.styles.fontSize = val;
      },
      deep: true,
      immediate: true,
    },
    styleOptions: {
      handler(val) {
        this.styles = Object.assign(this.styles, val);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.gradient {
  font-weight: bold;
  width: max-content;
  -webkit-background-clip: text;
  color: transparent;
}
</style>