ripples-vue

可用于vue 任何容器的ripple动效 现实现两个

用于vue3 代码量极小 集成vue3任何项目不会增加负担

引入动效 js gz压缩仅.5kb css gz压缩仅.5kb

引入

npm install inspira-vue

import {ripple,rippleIn} from "ripples-vue"
createApp(App).directive("ripple",ripple).directive("rippleIn",rippleIn).mount('#app')

# 例子 动效一
<Button v-ripple  >动效一<Button>
# 例子 动效二
<Button v-rippleIn  >动效二<Button>
# 例子 动效融合
  <Button v-ripple
    >
     动效融合
    <div
      v-rippleIn
      style="
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        border-radius: var(--pt);
        height: 100%;
      "
    ></div
  ></Button>