由于最近工作几次遇到要做翻转卡片的需求，虽然这基本上是个初学者练手的小组件，但每次都重新写总是有些麻烦的，没什么事于是就封装了一个供以后随时取用。俗话说“偷懒是生产力”嘛，有需要的也可随时取用，写的可不咋地但够用了，以后再优化一下

guthub地址：https://github.com/379949990/...

README：

这是一个适用于Vue框架的翻转卡片组件的简单封装。

使用方式：将rotateCard.vue文件添加至项目并在需要的地方作为组件引入即可。

rotate-card组件宽高默认为父元素的宽高；rotate-item-front元素为卡片正面展示的内容，可直接定义事件或添加样式；Rotate-item-back元素为卡片背面展示的内容，可直接定义事件或添加样式；rotate-card组件默认为横向翻转，如需纵向翻转可向rotate-card添加属性rotate=“x”或rotate=“X”；rotate-card组件默认触发翻转的行为为“click”，“mouseleave”时会自动回正；

示例代码：

<template>
    <div>
    <rotate-card>
      <rotate-item-front>
        正面内容
      </rotate-item-front>
      <rotate-item-back>
        背面内容
      </rotate-item-back>
    </rotate-card>
  </div>
</template>

<script>
import rotateCard from "./rotateCard.vue";
export default {
  data() {},
  components: { 
      rotateCard,
  },
  // ...
}
</script>

<style>
  .rotate-card-box {
    width: 360px;
    height: 480px;
  }
  .rotate-card-front {
    background-color: #dc8f8f;
    // ...
  }
  .rotate-card-back {
    background-color: #3c8399;
    // ...
  }
</style>