The implementation of the seemingly useless component (text gradient) in NaiveUI is so simple

preface

NaiveUI has a very interesting component, the gradient text component, as shown below:

The interesting point is that this text describes _ this thing looks useless, in fact it is useless._

Here we use Vue3.2+TS to implement this simple widget.

Gradient text

The implementation of gradient text is relatively simple. It can be achieved by using the background-clip attribute, which has a text attribute value, which can use the background as the foreground color of the text, the gradient text can be realized with the gradient, the sample code is as follows:

css

gradient text

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

The code runs as follows:

wrapping gradient component

We now start to use Vue3+TS to encapsulate this gradient component, which is actually very simple, that is, implement different text gradient effects through custom attributes and dynamic classes.

define props

Here we define 4 props, that is, the gradient text has 4 properties, as follows:

• type: Preset gradient effect

size: the size of the gradient text

weight: the weight of the gradient text

gradient: You can customize the gradient color

The implementation code is as follows:

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' | numberinterface IGradient {rotate: RotateType // Linear gradient direction start: string // start color value end: string // end color value}interface Props {type?: TextTypesize?: stringgradient?: IGradientweight?: WeightType}const props = defineProps()

The above is the only TS code in our component, that's all, because there is no logic in this component.

Implementing component effects

First of all, let's define the CSS of the four preset gradient effects. The sample code is as follows:

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

Now let's define the content of