vue3-clip-path-card

一个 Vue3 组件，用来使用 SVG clip-path 裁剪卡片形状，支持 hover 动画。

安装

npm install vue3-clip-path-card

使用

<script setup>
import { ClipPathCard } from "vue3-clip-path-card";
</script>

<template>
  <ClipPathCard
    class="w-80 h-60 bg-purple-400 text-white"
    :normalPath="`M 0 0 L 1 0 L 1 1 L 0 1 Z`"
    :hoverPath="`M 0.05 0 L 0.95 0 L 1 0.9 L 0 1 Z`"
  >
    <div class="p-6 font-bold">这里是内容</div>
  </ClipPathCard>
</template>

参数列表

| Prop | Type | Default | Description | | ---------- | ------- | -------- | ------------ | | clipId | string | auto生成 | 唯一 id | | normalPath | string | required | 正常状态 path | | hoverPath | string | - | hover 时 path | | hoverable | boolean | true | 是否启用 hover | | tag | string | div | 渲染标签 |