Vue.js中NaiveUI组件文字渐变的实现
更新时间：2022年07月13日 10:58:03 作者： 一碗周
这篇文章主要介绍了Vue.js中NaiveUI组件文字渐变的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
前言
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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了Vue标尺插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了Vue之el-option下拉框绑定问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇vue动态改变背景图片demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue 3.0使用element-plus按需导入方法以及报错解决
Vue3是不能直接使用Element-ui了,需要换成Element-plus,下面这篇文章主要给大家介绍了关于vue 3.0使用element-plus按需导入方法以及报错解决的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue遍历中存在el-form之踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue项目配置element-ui容易遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了Vue Element UI自定义描述列表组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论