Skip to content

翻转卡片

一个有着正面背面的卡片,不知道有什么用

INFO

无需引入,可直接使用

Props

名称类型默认值说明
widthstring100%卡片宽度
heightstring100%卡片高度
durationstring500ms翻转时间
transitionTimingFunctionstringcubic-bezier(0.4, 0, 1, 1)transition 函数
trigger'click' , 'hover'click翻转触发类型

Usage

vue
<template>
  <w-flipper trigger="hover" width="270px" height="300px">
    <template #front>
      <div class="abs-center">
        this is front
      </div>
    </template>

    <template #back>
      <div class="abs-center">
        this is back
      </div>
    </template>
  </w-flipper>
</template>

Released under the MIT License.