Ripple 水波指令

TIP

代码来源自：https://varlet.gitee.io/varlet-ui/#/zh-CN/ripple

使元素点击时生成一个水波扩散的效果。

基本用法

示例代码

<template>
  <el-button v-ripple type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

修改颜色

示例代码

<template>
  <el-button v-ripple="{ color: 'blue' }" type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

禁用水波

示例代码

<template>
  <el-button v-ripple="{ disabled: true }" type="success" style="width: 200px; height: 80px">Click me</el-button>
</template>
<script lang="ts" setup>
import { vRipple } from 'element-plus-plus'
</script>

Attributes

参数	说明	类型	可选值	默认值
color	颜色	string	—	currentColor
disabled	禁用状态	boolean	-	false