style(components): canonical code

src/components/ReFlop/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reFlop from "./src/index.vue";
+
+export const ReFlop = Object.assign(reFlop, {
+  install(app: App) {
+    app.component(reFlop.name, reFlop);
+  },
+});
+
+export default ReFlop;

src/components/ReFlop/src/Filpper.tsx

@@ -0,0 +1,95 @@
+import { defineComponent, ref } from "vue";
+import { propTypes } from "/@/utils/propTypes";
+import "./filpper.css";
+
+export default defineComponent({
+  name: "Filpper",
+  props: {
+    // front paper text
+    // 前牌文字
+    frontText: propTypes.number.def(0),
+    // back paper text
+    // 后牌文字
+    backText: propTypes.number.def(1),
+    // flipping duration, please be consistent with the CSS animation-duration value.
+    // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+    duration: propTypes.number.def(600),
+  },
+  setup(props) {
+    const { frontText, backText, duration } = props;
+    let isFlipping = ref(false);
+    let flipType = ref("down");
+    let frontTextFromData = ref(frontText);
+    let backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return "number" + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip("down", front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip("up", front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack,
+    };
+  },
+
+  render() {
+    return (
+      <>
+        <div
+          class={`m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`}
+        >
+          <div
+            class={`digital front ${this.textClass(this.frontTextFromData)}`}
+          ></div>
+          <div
+            class={`digital back ${this.textClass(this.backTextFromData)}`}
+          ></div>
+        </div>
+      </>
+    );
+  },
+});

src/components/ReFlop/src/filpper.css

@@ -0,0 +1,184 @@
+.m-flipper {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 1px #000;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 66px;
+  color: #fff;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  font-family: "Helvetica Neue";
+}
+
+.m-flipper .digital:before,
+.m-flipper .digital:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.m-flipper .digital:before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 10px 10px 0 0;
+  border-bottom: solid 1px #666;
+}
+
+.m-flipper .digital:after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 10px 10px;
+  line-height: 0;
+}
+
+/*向下翻*/
+.m-flipper.down .front:before {
+  z-index: 3;
+}
+
+.m-flipper.down .back:after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.m-flipper.down .front:after,
+.m-flipper.down .back:before {
+  z-index: 1;
+}
+
+.m-flipper.down.go .front:before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.m-flipper.down.go .back:after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+/*向上翻*/
+.m-flipper.up .front:after {
+  z-index: 3;
+}
+
+.m-flipper.up .back:before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.m-flipper.up .front:before,
+.m-flipper.up .back:after {
+  z-index: 1;
+}
+
+.m-flipper.up.go .front:after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.m-flipper.up.go .back:before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.m-flipper .number0:before,
+.m-flipper .number0:after {
+  content: "0";
+}
+
+.m-flipper .number1:before,
+.m-flipper .number1:after {
+  content: "1";
+}
+
+.m-flipper .number2:before,
+.m-flipper .number2:after {
+  content: "2";
+}
+
+.m-flipper .number3:before,
+.m-flipper .number3:after {
+  content: "3";
+}
+
+.m-flipper .number4:before,
+.m-flipper .number4:after {
+  content: "4";
+}
+
+.m-flipper .number5:before,
+.m-flipper .number5:after {
+  content: "5";
+}
+
+.m-flipper .number6:before,
+.m-flipper .number6:after {
+  content: "6";
+}
+
+.m-flipper .number7:before,
+.m-flipper .number7:after {
+  content: "7";
+}
+
+.m-flipper .number8:before,
+.m-flipper .number8:after {
+  content: "8";
+}
+
+.m-flipper .number9:before,
+.m-flipper .number9:after {
+  content: "9";
+}

src/components/ReFlop/src/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="flip-clock">
+    <flippers ref="flipperHour1" />
+    <flippers ref="flipperHour2" />
+    <em>:</em>
+    <flippers ref="flipperMinute1" />
+    <flippers ref="flipperMinute2" />
+    <em>:</em>
+    <flippers ref="flipperSecond1" />
+    <flippers ref="flipperSecond2" />
+  </div>
+</template>
+
+<script lang='ts'>
+import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue";
+import flippers from "./Filpper";
+export default {
+  name: "Flop",
+  components: {
+    flippers
+  },
+  setup() {
+    let vm: any;
+    let timer = ref(null);
+    let flipObjs = ref([]);
+
+    // 初始化数字
+    const init = () => {
+      let now = new Date();
+      let nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
+      for (let i = 0; i < flipObjs.value.length; i++) {
+        flipObjs.value[i].setFront(nowTimeStr[i]);
+      }
+    };
+
+    // 开始计时
+    const run = () => {
+      timer.value = setInterval(() => {
+        // 获取当前时间
+        let now = new Date();
+        let nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
+        let nextTimeStr = formatDate(now, "hhiiss");
+        for (let i = 0; i < flipObjs.value.length; i++) {
+          if (nowTimeStr[i] === nextTimeStr[i]) {
+            continue;
+          }
+          flipObjs.value[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
+        }
+      }, 1000);
+    };
+
+    // 正则格式化日期
+    const formatDate = (date: Date, dateFormat: string) => {
+      /* 单独格式化年份，根据y的字符数量输出年份
+     * 例如：yyyy => 2019
+            yy => 19
+            y => 9
+     */
+      if (/(y+)/.test(dateFormat)) {
+        dateFormat = dateFormat.replace(
+          RegExp.$1,
+          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
+      }
+      // 格式化月、日、时、分、秒
+      let o = {
+        "m+": date.getMonth() + 1,
+        "d+": date.getDate(),
+        "h+": date.getHours(),
+        "i+": date.getMinutes(),
+        "s+": date.getSeconds()
+      };
+      for (let k in o) {
+        if (new RegExp(`(${k})`).test(dateFormat)) {
+          // 取出对应的值
+          let str = o[k] + "";
+          /* 根据设置的格式，输出对应的字符
+           * 例如: 早上8时，hh => 08，h => 8
+           * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+           * 例如: 下午15时，hh => 15, h => 15
+           */
+          dateFormat = dateFormat.replace(
+            RegExp.$1,
+            RegExp.$1.length === 1 ? str : padLeftZero(str)
+          );
+        }
+      }
+      return dateFormat;
+    };
+
+    // 日期时间补零
+    const padLeftZero = (str: string | any[]) => {
+      return ("00" + str).substr(str.length);
+    };
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance(); //获取组件实例
+      nextTick(() => {
+        flipObjs.value = [
+          vm.refs.flipperHour1,
+          vm.refs.flipperHour2,
+          vm.refs.flipperMinute1,
+          vm.refs.flipperMinute2,
+          vm.refs.flipperSecond1,
+          vm.refs.flipperSecond2
+        ];
+
+        init();
+        run();
+      });
+    });
+
+    return {
+      timer,
+      flipObjs,
+      init,
+      run,
+      formatDate,
+      padLeftZero
+    };
+  }
+};
+</script>
+
+<style>
+.flip-clock .m-flipper {
+  margin: 0 3px;
+}
+.flip-clock em {
+  display: inline-block;
+  line-height: 102px;
+  font-size: 66px;
+  font-style: normal;
+  vertical-align: top;
+}
+</style>