Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
前言
NaiveUI中有著一個(gè)非常有意思的組件，就是漸變文字組件，如下圖：
有意思的點(diǎn)是這段文字描述這個(gè)東西看起來(lái)沒(méi)啥用，實(shí)際上確實(shí)沒(méi)啥用。
這里我們用Vue3.2+TS來(lái)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的小組件。
漸變文字
漸變文字的實(shí)現(xiàn)比較簡(jiǎn)單，利用background-clip屬性就可以實(shí)現(xiàn)，該屬性存在一個(gè)text屬性值，它可以將背景作為文字的前景色，配合漸變就可以實(shí)現(xiàn)漸變文字了，
示例代碼如下：
<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%
);
}代碼運(yùn)行效果如下：
封裝漸變組件
我們現(xiàn)在開(kāi)始使用Vue3+TS來(lái)封裝這個(gè)漸變組件，其實(shí)非常簡(jiǎn)單，就是通過(guò)自定義屬性和動(dòng)態(tài)class實(shí)現(xiàn)不同的文字漸變效果。
定義props
這里我們定義4個(gè)props，也就是漸變文字具有4個(gè)屬性，分別如下：
type：預(yù)設(shè)的漸變效果size：漸變文字的大小weight：漸變文字的粗細(xì)gradient：可以自定義漸變顏色
實(shí)現(xiàn)代碼如下：
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 // 開(kāi)始的色值
end: string // 結(jié)束的色值
}
interface Props {
type?: TextType
size?: string
gradient?: IGradient
weight?: WeightType
}
const props = defineProps<Props>()上面就是我們這個(gè)組件中唯一的TS代碼，只有這些了，因?yàn)檫@個(gè)組件中沒(méi)有任何的邏輯部分。
實(shí)現(xiàn)組件效果
首先我們先將預(yù)設(shè)的那四個(gè)漸變效果的CSS進(jìn)行定義一下，示例代碼如下：
.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% ); }現(xiàn)在我們來(lái)定義一下<template>中的內(nèi)容：
<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,
}"
>
<!-- 默認(rèn)插槽，也就是文字 -->
<slot></slot>
</span>
</template>上面的代碼中通過(guò)動(dòng)態(tài)class實(shí)現(xiàn)不同預(yù)設(shè)的展示以及自定義漸變的展示。
上面的代碼中存在??和?.這兩個(gè)運(yùn)算符，這兩個(gè)是ES2020中增加的新特性，如果不了解可以通過(guò)下面這篇文章來(lái)了解一下ECMAScript中的所有新特性：
JavaScript ECMAScript 6(ES2015~ES2022)所有新特性總結(jié)
剩余的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%
);
}到此這篇關(guān)于Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue.js NaiveUI組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法
Pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue標(biāo)尺插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vue之el-option下拉框綁定問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇vue動(dòng)態(tài)改變背景圖片demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue遍歷中存在el-form之踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目配置element-ui容易遇到的坑及解決
這篇文章主要介紹了vue項(xiàng)目配置element-ui容易遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue Element UI自定義描述列表組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05