乐趣区

关于javascript:适用于Vue的翻转卡片组件

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

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>


退出移动版