[VUE3] 阴影字体+渐变字体

key: 阴影 渐变 字体

• 知识点 : 使用useSlots判断是否有传入默认插槽

// if(useSlots().default) 可以判断插槽是否有内容

// <BFont>渐变阴影文字<BFont>

$slots.default()[0].children 可以得到传入的文字

• 知识点:  vue3 中 v-bind() 可以对 computed和ref使用 但不能对props使用 但可以转化

const props = defineProps({   color: {     type: String,     require: true,     default: 'linear-gradient(0deg, #9ccdff 0%, #ffffff 100%)',   },

}

const color = computed(()=> props.color)

// style

.bright-font {

  background: v-bind(color)

}

• 知识点: less函数也可以使用vue3 style v-bind()的传值

<style lang="less" scoped> .bright-font {   .gradientShadow(v-bind(backgroundGradient);v-bind(textShadow)); } </style>

fn.less

// 字体既要渐变又要阴影
.gradientShadow(@backgroundGradient; @textShadow) {
  color: transparent;
  display: block;
  position: relative;
  text-shadow: @textShadow;
  &::after {
    content: attr(data-content);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: @backgroundGradient;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    // white-space: nowrap;
  }
}

完整代码

<template>
  <span class="bright-font" :data-content="label">
    <slot>渐变阴影字体</slot>
  </span>
</template>

<script setup>
import { defineProps, computed, useSlots } from 'vue';

const props = defineProps({
  color: {
    type: String,
    require: true,
    default: 'linear-gradient(0deg, #9ccdff 0%, #ffffff 100%)',
  },
  backgroundGradient: {
    type: String,
    require: true,
    default: 'linear-gradient(0deg, #9ccdff 0%, #ffffff 100%)',
  },
  shadow: {
    type: String,
    require: true,
    default: '2px 2px 1px rgba(20, 39, 55, 0.8), 1px 1px 4px rgba(130, 224, 255, 0.7)',
  },
  textShadow: {
    type: String,
    require: true,
    default: '2px 2px 1px rgba(20, 39, 55, 0.8), 1px 1px 4px rgba(130, 224, 255, 0.7)',
  },
});
const $slots = useSlots();

const backgroundGradient = computed(() => props.color || props.backgroundGradient);
const textShadow = computed(() => props.shadow || props.textShadow);
const label = computed(() => ($slots.default ? $slots.default()[0].children : '渐变阴影字体'));
</script>

<style lang="less" scoped>
.bright-font {
  .gradientShadow(v-bind(backgroundGradient);v-bind(textShadow));
}
</style>

使用

<template>
<BFont shadow="2px 2px 1px rgba(20, 39, 55, 0.8), 1px 1px 4px rgba(130, 224, 255, 0.7)" color="linear-gradient(0deg, #9ccdff 0%, #ffffff 100%)">需要渐变并带阴影文字</BFont>

</template>

<script setup>
import BFont from 'BFont';

<script>