效果如下图在线预览APIsGradientText参数说明类型默认值gradient文字渐变色参数string | Gradientundefinedsize文字大小不指定单位时默认单位pxnumber | string14weight文字粗细number400type渐变文字的类型‘primary’ | ‘info’ | ‘success’ | ‘warning’ | ‘error’‘primary’Gradient Type名称说明类型默认值from起始颜色stringundefinedto终点颜色stringundefineddeg?渐变角度单位degnumber | string252Slots名称说明类型default自定义内容v-slot:default创建渐变文字组件GradientText.vuescript setup langtsimport{computed}fromvueexportinterfaceGradient{from:stringto:stringdeg?:number|string// 渐变角度默认 252单位 deg}exportinterfaceProps{gradient?:string|Gradient// 文字渐变色参数size?:number|string// 文字大小不指定单位时默认单位 pxweight?:number// 文字粗细type?:primary|info|success|warning|error// 渐变文字的类型}constpropswithDefaults(definePropsProps(),{gradient:undefined,size:14,weight:400,type:primary})enumTypeStartColor{primaryrgba(22, 199, 255, 0.6),inforgba(22, 199, 255, 0.6),successrgba(82, 196, 26, 0.6),warningrgba(250, 173, 20, 0.6),errorrgba(255, 77, 79, 0.6)}enumTypeEndColor{primary#1677ff,info#1677ff,success#52c41a,warning#faad14,error#ff4d4f}constgradientTextcomputed((){if(typeofprops.gradientstring){return{backgroundImage:props.gradient}}return{}})constrotatecomputed((){if(typeofprops.gradientobjectprops.gradient.deg){returnisNumber(props.gradient.deg)?${props.gradient.deg}deg:props.gradient.deg}return252deg})constcolorStartcomputed((){if(typeofprops.gradientobject){returnprops.gradient.from}else{returnTypeStartColor[props.type]}})constcolorEndcomputed((){if(typeofprops.gradientobject){returnprops.gradient.to}else{returnTypeEndColor[props.type]}})constfontSizecomputed((){if(typeofprops.sizenumber){return${props.size}px}if(typeofprops.sizestring){returnprops.size}})functionisNumber(value:string|number):boolean{returntypeofvaluenumber}/scripttemplatespanclassgradient-text-wrap:style[--rotate:${rotate}; --color-start:${colorStart}; --color-end:${colorEnd}; --font-size:${fontSize}; --font-weight:${weight};,gradientText]slot/slot/span/templatestyle langlessscoped.gradient-text-wrap{display:inline-block;font-size:var(--font-size);font-weight:var(--font-weight);line-height:1.5714285714285714;-webkit-background-clip:text;background-clip:text;color:#0000;white-space:nowrap;background-image:linear-gradient(var(--rotate),var(--color-start)0%,var(--color-end)100%);transition:all0.3s cubic-bezier(0.4,0,0.2,1);}/style在要使用的页面引入其中引入使用了以下组件Vue3间距Spacescript setup langtsimportGradientTextfrom./GradientText.vue/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Space gapsmallverticalGradientTextbasic/GradientTextGradientText typeinfoinfo/GradientTextGradientText typesuccesssuccess/GradientTextGradientText typewarningwarning/GradientTextGradientText typeerrorerror/GradientText/Spaceh2classmt30 mb10文字样式/h2Space gapsmallverticalGradientText typeinfo:size36:weight500Live Forever/GradientTextGradientText typeerror:size36:weight600Live Forever/GradientTextGradientText typewarning:size24:weight700MarriedwithChildren/GradientTextGradientText typesuccess:size24:weight800BackintheUSSR/GradientText/Spaceh2classmt30 mb10自定义颜色/h2Space gapsmallverticalGradientText:size24:weight500:gradient{from:rgb(85, 85, 85),to:rgb(170, 170, 170)}定制颜色/GradientTextGradientText:size24:weight500:gradient{deg:180,from:rgb(85, 85, 85),to:rgb(170, 170, 170)}定制颜色/GradientTextGradientText:size28:weight500:gradient{deg:90deg,from:#09c8ce,to:#eb2f96}和标题一样的颜色/GradientTextGradientText:size24:weight500gradientlinear-gradient(90deg, #1677ff 0%, lime 50%, #ff6900 100%)瞎写的颜色/GradientText/Space/div/template