渐变文字 GradientText

这个东西看起来没啥用，实际上也确实没啥用😁😁

基本使用

basicinfosuccesswarningerror

Show Code

<template>
  <Space gap="small" vertical>
    <GradientText>basic</GradientText>
    <GradientText type="info">info</GradientText>
    <GradientText type="success">success</GradientText>
    <GradientText type="warning">warning</GradientText>
    <GradientText type="error">error</GradientText>
  </Space>
</template>

文字样式

Live ForeverLive ForeverMarried with ChildrenBack in the USSR

Show Code

<template>
  <Space gap="small" vertical>
    <GradientText type="info" :size="36" :weight="500">Live Forever</GradientText>
    <GradientText type="error" :size="36" :weight="600">Live Forever</GradientText>
    <GradientText type="warning" :size="24" :weight="700">Married with Children</GradientText>
    <GradientText type="success" :size="24" :weight="800">Back in the USSR</GradientText>
  </Space>
</template>

自定义颜色

定制颜色定制颜色和标题一样的颜色瞎写的颜色

Show Code

<template>
  <Space gap="small" vertical>
    <GradientText
      :size="24"
      :weight="500"
      :gradient="{
        from: 'rgb(85, 85, 85)',
        to: 'rgb(170, 170, 170)'
      }"
      >定制颜色</GradientText
    >
    <GradientText
      :size="24"
      :weight="500"
      :gradient="{
        deg: 180,
        from: 'rgb(85, 85, 85)',
        to: 'rgb(170, 170, 170)'
      }"
      >定制颜色</GradientText
    >
    <GradientText
      :size="28"
      :weight="500"
      :gradient="{
        deg: '90deg',
        from: '#09c8ce',
        to: '#eb2f96'
      }"
      >和标题一样的颜色</GradientText
    >
    <GradientText :size="24" :weight="500" gradient="linear-gradient(90deg, #1677ff 0%, lime 50%, #ff6900 100%)">瞎写的颜色</GradientText>
  </Space>
</template>

APIs

GradientText

参数	说明	类型	默认值
gradient	文字渐变色参数	string | Gradient	undefined
size	文字大小，不指定单位时，默认单位 px	number | string	14
weight	文字粗细	number	400
type	渐变文字的类型	'primary' | 'info' | 'success' | 'warning' | 'error'	'primary'

Gradient Type

名称	说明	类型	默认值
from	起始颜色	string	undefined
to	终点颜色	string	undefined
deg?	渐变角度，单位 deg	number | string	252