shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/text/Title/src/index.vue

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

<script setup lang="ts" name="fmDashboardBasicTitle">
import { defineProps, computed } from 'vue';
import { titleProps } from './props';
import { transformStyle } from '../../../../utils/transStyle';

const props = defineProps(titleProps);
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'
  }
});
</script>

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