NaiveUI中看起來沒啥用的組件(文字漸變)實現原來這麼簡單

---

theme: fancy highlight: atom-one-light

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第25天，點擊查看活動詳情

Hi~，我是一碗周，如果寫的文章有幸可以得到你的青睞，萬分有幸~

🍎 寫在前面

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

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

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

🍒 漸變文字

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

css

css <span class="ywz-gradient-text">漸變文字</span>

html

html .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：可以自定義漸變顏色

實現代碼如下：

typescript 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進行定義一下，示例代碼如下：

```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>中的內容：

```vue ```

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

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

用8000字總結了【ES2015\~ES2022】的所有新特性

剩餘的CSS代碼如下：

```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% ); }

```

🥝 寫在最後

這篇文章到這就寫完了，代碼量超級少，最後實現了這個有意思的小組件。

這把是娛樂局