zhgkpt-datav/components/LinearText/index.vue

<template >
  <div class="linear-text" :style="linearTextStyle" :data-text="text">
    {{ text }}
  </div>
</template>
<script>

export default {
  name: 'LinearText',
  props: {
    text: {
      type: String,
      default: ""
    },
    fontSize: {
      type: String,
      default: "24px"
    },
    lineHeight: {
      type: String,
      default: "24px"
    },
    extClass: {
      type: Object,
      default: () => ({})
    },
    startColor: {
      type: String,
      default: "#95CCFF"
    },
    endColor: {
      type: String,
      default: "#fff"
    }
  },
  computed: {
    linearTextStyle() {
      return {
        '--font-size': this.fontSize,
        '--line-height': this.lineHeight,
        '--start-color': this.startColor,
        '--end-color': this.endColor,
        ...this.extClass
      }
    }
  }
}
</script>

<style scoped>
.linear-text {
  position: relative;
  color: var(--start-color);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.linear-text::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  color: var(--end-color);
  -webkit-mask: linear-gradient(180deg, var(--start-color), transparent);
}
</style>