v-gradient 指令

介绍

v-gradient 指令用于给元素添加渐变流动背景色。

基础方法

将 v-gradient 指令添加到需要流动渐变背景颜色的元素上：

<template>
  <div
    v-gradient="{
      direction: '45deg',
      speed: 10,
      colors: ['#ff0000', '#00ff00', '#0000ff']
    }"
    class="gradient-box"
  >
    流动渐变背景
  </div>
</template>

基础用法

流动渐变背景

查看代码

<script setup lang="ts">
import { vGradient } from '@cp-vuedir/core'
</script>

<template>
  <div
    v-gradient="{
      direction: 'to right',
      speed: 30,
      colors: ['#ff0000', '#00ff00', '#0000ff']
    }"
    class="gradient-box"
  >
    流动渐变背景
  </div>
</template>

<style scoped>
.gradient-box {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* 文字阴影 */
  border-radius: 12px;
  /* 圆角 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  /* 元素阴影 */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* 过渡效果 */
}

.gradient-box:hover {
  transform: scale(1.05);
  /* 悬停时放大 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  /* 悬停时阴影加深 */
}
</style>

API

属性名	说明	类型	是否必选	默认值
direction	控制渐变流动方向，支持所有CSS liner-gradient的方向值	String	○	to right
speed	控制渐变流动速度，单位为秒	Number	○	10
colors	渐变颜色数组	String[]	○	['#ff0000', '#00ff00', '#0000ff']

注意事项

注意

• 确保应用该指令的元素有明确的宽度和高度，否则背景渐变可能无法正确显示。
• 浏览器兼容性：该指令使用了CSS渐变和动画，因此可能不完全支持所有浏览器。
• 该指令会直接修改元素的 background 和 backgroundPosition 样式。如果你在元素上应用了其他背景样式，可能会与指令冲突。在这种情况下，建议使用内联样式或优先级更高的 CSS 规则来覆盖指令的样式。