From e3d5860a4179dd139fbae8fd642e005ba80a2653 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Thu, 29 Sep 2022 15:20:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E7=BF=BB=E7=89=8C?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Flipper/index.vue | 60 ++++++--------------------------
 1 file changed, 10 insertions(+), 50 deletions(-)

diff --git a/src/components/Flipper/index.vue b/src/components/Flipper/index.vue
index 8ccc7696..1e1d86de 100644
--- a/src/components/Flipper/index.vue
+++ b/src/components/Flipper/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
-    <div class="digital front" :class="_textClass(frontTextFromData)"></div>
-    <div class="digital back" :class="_textClass(backTextFromData)"></div>
+    <div class="digital front" :data-front="frontTextFromData"></div>
+    <div class="digital back" :data-back="backTextFromData"></div>
   </div>
 </template>
 
@@ -51,7 +51,6 @@ const flipType = ref<FlipType>('down')
 const frontTextFromData = ref(props.frontText)
 const backTextFromData = ref(props.backText)
 
-const _textClass = (number: string | number) => `number${number}`
 const _flip = (type: FlipType, front: string | number, back: string | number) => {
   // 如果处于翻转中，则不执行
   if (isFlipping.value) return
@@ -150,12 +149,14 @@ $radius: v-bind('props.radius');
     overflow: hidden;
     box-sizing: border-box;
   }
-  // .digital.front:after {
-  //   content: v-bind(frontTextFromData) !important;
-  // }
-  // .digital.back:after {
-  //   content: v-bind(backTextFromData) !important;
-  // }
+  .digital.front:before,
+  .digital.front:after {
+    content: attr(data-front) !important;
+  }
+  .digital.back:before,
+  .digital.back:after {
+    content: attr(data-back) !important;
+  }
   .digital:before {
     top: 0;
     bottom: 50%;
@@ -212,46 +213,5 @@ $radius: v-bind('props.radius');
   &.up.go .back:before {
     animation: backFlipUp v-bind('`${props.duration / 1000}s`') ease-in-out both;
   }
-
-  .number0:before,
-  .number0:after {
-    content: '0';
-  }
-  .number1:before,
-  .number1:after {
-    content: '1';
-  }
-  .number2:before,
-  .number2:after {
-    content: '2';
-  }
-  .number3:before,
-  .number3:after {
-    content: '3';
-  }
-  .number4:before,
-  .number4:after {
-    content: '4';
-  }
-  .number5:before,
-  .number5:after {
-    content: '5';
-  }
-  .number6:before,
-  .number6:after {
-    content: '6';
-  }
-  .number7:before,
-  .number7:after {
-    content: '7';
-  }
-  .number8:before,
-  .number8:after {
-    content: '8';
-  }
-  .number9:before,
-  .number9:after {
-    content: '9';
-  }
 }
 </style>