NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单

🍎 写在前面

NaiveUI中有着一个非常有意思的组件，就是渐变文字组件，如下图：

有意思的点是这段文字描述_这个东西看起来没啥用，实际上确实没啥用。_

这里我们用Vue3.2+TS来实现这个简单的小组件。

🍒 渐变文字

渐变文字的实现比较简单，利用background-clip属性就可以实现，该属性存在一个text属性值，它可以将背景作为文字的前景色，配合渐变就可以实现渐变文字了，示例代码如下：

css

<span class="ywz-gradient-text">渐变文字</span> 

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