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

26次阅读

共计 950 个字符，预计需要花费 3 分钟才能阅读完成。

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

应用形式：将 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>

正文完