<template>
  <div class="cus-title" :style="style">
    {{ text }}
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { titleProps } from "./props";
import { transformStyle } from "@shalu/utils";

export default defineComponent({
  name: "DTitle",
  props: titleProps,
  setup(props) {
    const style = computed(() => {
      const style = transformStyle(props);
      const obj: Record<string, string> = {};
      if (style.color.length > 9) {
        obj.backgroundImage = style.color;
        obj.webkitBackgroundClip = "text";
        obj.webkitTextFillColor = "transparent";
      }
      return {
        ...obj,
        ...style,
        width: "100%",
        height: "100%",
        lineHeight: props.height + "px",
      };
    });

    return {
      style,
    };
  },
});
</script>

<style lang="less" scoped></style>
