Vue.js中NaiveUI組件文字漸變的實現

Posted on by

前言

NaiveUI中有著一個非常有意思的組件，就是漸變文字組件，如下圖：

有意思的點是這段文字描述這個東西看起來沒啥用，實際上確實沒啥用。

這裡我們用Vue3.2+TS來實現這個簡單的小組件。

漸變文字

漸變文字的實現比較簡單，利用background-clip屬性就可以實現，該屬性存在一個text屬性值，它可以將背景作為文字的前景色，配合漸變就可以實現漸變文字瞭，

示例代碼如下：

<span class="ywz-gradient-text">漸變文字</span>
.ywz-gradient-text {
  display: inline-block;
  font-weight: 700;
  font-size: 32px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap;
  background-image: linear-gradient(
    252deg,
    rgba(24, 160, 88, 0.6) 0%,
    #18a058 100%
  );
}

代碼運行效果如下：

封裝漸變組件

我們現在開始使用Vue3+TS來封裝這個漸變組件，其實非常簡單，就是通過自定義屬性和動態class實現不同的文字漸變效果。

定義props

這裡我們定義4個props，也就是漸變文字具有4個屬性，分別如下：

  • type：預設的漸變效果
  • size：漸變文字的大小
  • weight：漸變文字的粗細
  • gradient：可以自定義漸變顏色

實現代碼如下：

type TextType = 'error' | 'info' | 'warning' | 'success'
type WeightType = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold'
type RotateType = 'to left' | 'to right' | 'to bottom' | 'to top' | number
interface IGradient {
  rotate: RotateType // 線性漸變方向
  start: string // 開始的色值
  end: string // 結束的色值
}
interface Props {
  type?: TextType
  size?: string
  gradient?: IGradient
  weight?: WeightType
}
const props = defineProps<Props>()

上面就是我們這個組件中唯一的TS代碼，隻有這些瞭，因為這個組件中沒有任何的邏輯部分。

實現組件效果

首先我們先將預設的那四個漸變效果的CSS進行定義一下，示例代碼如下：

.error { background-image: linear-gradient( 252deg, rgba(208, 48, 80, 0.6) 0%, #d03050 100% );}
.info { background-image: linear-gradient( 252deg, rgba(32, 128, 240, 0.6) 0%, #2080f0 100%);}
.warning { background-image: linear-gradient( 252deg, rgba(240, 160, 32, 0.6) 0%, #f0a020 100% );}
.success { background-image: linear-gradient( 252deg, rgba(24, 160, 88, 0.6) 0%, #18a058 100% ); }

現在我們來定義一下<template>中的內容：

<template>
  <span
    class="ywz-gradient-text"
    :class="[props.type, props.gradient ? 'custom-gradient' : '']"
    :style="{
      '--size': props.size ?? '16px',
      '--weight': props.weight ?? '400',
      '--rotate':
        typeof props.gradient?.rotate === 'number'
          ? props.gradient?.rotate + 'deg'
          : props.gradient?.rotate,
      '--start': props.gradient?.start,
      '--end': props.gradient?.end,
    }"
  >
    <!-- 默認插槽，也就是文字 -->
    <slot></slot>
  </span>
</template>

上面的代碼中通過動態class實現不同預設的展示以及自定義漸變的展示。

上面的代碼中存在??和?.這兩個運算符，這兩個是ES2020中增加的新特性，如果不瞭解可以通過下面這篇文章來瞭解一下ECMAScript中的所有新特性：

JavaScript ECMAScript 6(ES2015~ES2022)所有新特性總結

剩餘的CSS代碼如下：

.ywz-gradient-text {
  display: inline-block;
  font-weight: var(--weight);
  background-clip: text;
  font-size: var(--size);
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.custom-gradient {
  background-image: linear-gradient(
    var(--rotate),
    var(--start) 0%,
    var(--end) 100%
  );
}

到此這篇關於Vue.js中NaiveUI組件文字漸變的實現的文章就介紹到這瞭,更多相關Vue.js NaiveUI組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：