65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<!--
|
|
filename: GradientText.vue
|
|
author: liubin
|
|
date: 2024-04-24 16:33:25
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<svg :height="size + 8" width="100%">
|
|
<defs>
|
|
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
|
|
<stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<text
|
|
x="0"
|
|
:y="size"
|
|
fill="url(#smoke-text)"
|
|
:style="{
|
|
fontSize: `${size}px`,
|
|
letterSpacing: spacing || '2px',
|
|
fontFamily: 'Calibri, Verdana, sans-serif',
|
|
}"
|
|
>
|
|
{{ text | numberFilter }}
|
|
</text>
|
|
</svg>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "GradientText",
|
|
components: {},
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: "Test",
|
|
},
|
|
spacing: {
|
|
type: String,
|
|
default: "1px",
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 24,
|
|
},
|
|
},
|
|
filters: {
|
|
numberFilter(value) {
|
|
if (value != null && !isNaN(parseInt(value))) {
|
|
return parseInt(value).toLocaleString();
|
|
} else {
|
|
return value;
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|