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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue+OpenLayer为地图添加风场效果
这篇文章主要为大家展示了一个demo，即利用Vue和OpenLayer在地图上面添加风场效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2022-04-04
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-07-07
解决vue-loader加载不上的问题
这篇文章主要介绍了解决vue-loader加载不上的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue里面的el-select绑定默认值方式
这篇文章主要介绍了vue里面的el-select绑定默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue利用openlayers实现点击弹窗的方法详解
点击弹窗其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。本文将利用openlayers实现这一效果，快跟随小编一起学习一下吧
2022-06-06
vue基于element的区间选择组件
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue实现验证码倒计时按钮
这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue微信分享到朋友圈 vue微信发送给好友
这篇文章主要为大家详细介绍了vue微信分享到朋友圈，vue微信发送给好友功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
强烈推荐!Vue3.2中的setup语法糖
script setup是vue3的新语法糖,并不是新增的功能模块,只是简化了以往的组合式API必须返回(return)的写法,并且有更好的运行时性能,这篇文章主要给大家介绍了关于Vue3.2中setup语法糖的相关资料,需要的朋友可以参考下
2021-12-12