zhgkpt-datav/components/LinearText/index.vue

<template>
  <div
    @click="(e) => $emit('click', e)"
    class="linear-text"
    :style="linearTextStyle"
    :data-text="text"
  >
    {{ text }}
  </div>
</template>
<script>
export default {
  name: "LinearText",
  props: {
    text: {
      type: [Number, 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>