v-ripple

简介

v-ripple 是一个用于给目标元素添加水波纹效果的指令，支持自定义波纹颜色和时长。

基础用法

通过给元素或者组件添加v-ripple的指令实现。

查看代码

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

<template>
  <a-button type="primary" shape="round" size="large" long v-ripple>泛起涟漪</a-button>
</template>

设置波纹颜色

通过color属性设置波纹颜色。

很多时候，绝对不是你付出一盏，必定收获一盅。时光的仰首间，生命的起伏间，有多少世事，能如清水滴石般的清透;又有多少故事，都能书写完美的结局。

查看代码

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

<template>
  <p
    v-ripple="{
      color: 'rgb(11, 89, 250)'
    }"
    :style="{
      padding: '1rem',
      border: '1px solid var(--vp-c-text-1)',
      borderRadius: '8px',
      margin: '1rem 0'
    }"
  >
    很多时候，绝对不是你付出一盏，必定收获一盅。时光的仰首间，生命的起伏间，有多少世事，能如清水滴石般的清透;又有多少故事，都能书写完美的结局。
  </p>
</template>

设置波纹时长

通过duration属性设置波纹时长。

查看代码

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

<template>
  <a-typography-paragraph
    v-ripple="{
      color: 'rgb(11, 89, 250)',
      duration: 2000
    }"
    :style="{
      padding: '1rem',
      border: '1px solid var(--vp-c-text-1)',
      color: 'var(--vp-c-text-1)',
      borderRadius: '8px',
      margin: '1rem 0'
    }"
  >
    人生，哪有事事如意，生活，哪有样样顺心。所以，不和别人较真，因为不值得，不和自己较真，因为伤不起，不和往事较真，因为输不起。
  </a-typography-paragraph>
</template>

<style scoped></style>

API

属性名	说明	类型	是否必选	默认值
duration	波纹时长，单位ms	number	○	500
color	波纹颜色	string	○	#fff

注意事项

注意

• duration属性的单位为毫秒。