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

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 class="rotate-card-box">    <rotate-card>      <rotate-item-front class="rotate-card-front">        侧面内容      </rotate-item-front>      <rotate-item-back class="rotate-card-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>