水波纹 Ripple

使元素点击时生成一个水波扩散的效果，此效果通过自定义指令实现 🏀

基本使用

直接添加指令v-ripple即可

click me

<template>
  <ik-space>
    <ik-button type="primary" v-ripple>按钮1</ik-button>
    <ik-button type="warning" v-ripple>按钮2</ik-button>
    <div class="ripple-box" v-ripple>click me</div>
  </ik-space>
</template>
<style>
.ripple-box {
  width: 200px;
  height: 120px;
  border-radius: var(--default-radius);
  background: var(--default-color);
  cursor: pointer;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

显示代码

复制代码片段

自定义波纹颜色

v-ripple指令中字面量传参可自定义颜色

click me

click me

<template>
  <ik-space>
    <div class="ripple-box" v-ripple="{ color: '#6379f6' }">click me</div>
    <div class="ripple-box" v-ripple="{ color: 'pink' }">click me</div>
  </ik-space>
</template>
<style>
.ripple-box {
  width: 200px;
  height: 120px;
  border-radius: var(--default-radius);
  background: var(--default-color);
  cursor: pointer;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

显示代码

复制代码片段