feat: auto height

lvjiaxuan · May 17, 2023 · 17ebe16 · 17ebe16
1 parent 729ff04
commit 17ebe16
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -37,12 +37,6 @@ props: {
     default: 0,
     validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
   },
-  itemHeightWithUnit: {
-    // The height style with unit of a number item.
-    // It is used to calculate the rolling things.
-    type: String,
-    required: true,
-  },
   reverseRollDirection: {
     // Reverse the direction of the rolling.
     type: Boolean,
@@ -73,7 +67,7 @@ props: {
     type: String,
     default: '0',
   },
-}
+},
 ```
 
 ## Expose

diff --git a/playgrounds/vue3/src/App.vue b/playgrounds/vue3/src/App.vue
@@ -91,7 +91,7 @@ options.immediate.value = sessionStorage.getItem('immediate') === 'true'
         :item-height-with-unit="options.itemHeightWithUnit.value"
         :transition-delay="options.transitionDelay.value"
         :transition-duration="options.transitionDuration.value"
-        :transition-time-function="options.transitionTimingFunction.value"
+        :transition-timing-function="options.transitionTimingFunction.value"
         :immediate="options.immediate.value"
         :reverse-roll-direction="options.reverseRollDirection.value"
         item-class="item-class"
@@ -149,12 +149,12 @@ options.immediate.value = sessionStorage.getItem('immediate') === 'true'
 
     <code class="css-style">
       .item-class {
-      border-radius: 8px;
-      width: 100px;
-      margin: 10px;
+      border-radius: 10px;
+      width: 150px;
+      font-size: 8em;
+      color: #e5e5e5;
+      border: 1px solid #333;
       background: linear-gradient(0deg, rgba(100, 184, 255, 1) 0%, rgba(0, 120, 255, 1) 50%, rgba(100, 184, 255, 1) 100%);
-      font-size: 80px;
-      @apply c-white;
       }
     </code>
 
@@ -186,11 +186,11 @@ code {
   line-height: 1.5;
 }
 .item-class {
-  // border-radius: 8px;
-  // width: 100px;
-  // margin: 10px;
-  // background: linear-gradient(0deg, rgba(100, 184, 255, 1) 0%, rgba(0, 120, 255, 1) 50%, rgba(100, 184, 255, 1) 100%);
-  // font-size: 80px;
-  // @apply c-white;
+  border-radius: 10px;
+  width: 150px;
+  font-size: 8em;
+  color: #e5e5e5;
+  border: 1px solid #333;
+  background: linear-gradient(0deg, rgba(100, 184, 255, 1) 0%, rgba(0, 120, 255, 1) 50%, rgba(100, 184, 255, 1) 100%);
 }
 </style>
diff --git a/src/index.ts b/src/index.ts
@@ -30,12 +30,6 @@ export default defineComponent({
       default: 0,
       validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
     },
-    itemHeightWithUnit: {
-      // The height style with unit of a number item.
-      // It is used to calculate the rolling things.
-      type: String,
-      required: true,
-    },
     reverseRollDirection: {
       // Reverse the direction of the rolling.
       type: Boolean,
@@ -88,24 +82,29 @@ export default defineComponent({
         .forEach((number, idx) => setItemTranslateY(idx, +number))
     }
 
-
     const endNumberWithPadding = computed(() => props.end.toString().padStart(+props.totalLength, '0'))
     function roll() {
       itemTranslateYs.value.length = 0
       endNumberWithPadding.value.split('').forEach((number, idx) => setItemTranslateY(idx, +number))
     }
 
+    const vueNumberRollRef = ref<HTMLElement | null>(null)
+    const itemHeightNumber = computed(() =>
+      (vueNumberRollRef.value?.children[0]?.children[0]?.children[0] as HTMLElement)?.offsetHeight ?? 0)
 
-    const itemHeightUnit = computed(() => props.itemHeightWithUnit.replace(/\d/g, ''))
-    const itemHeightNumber = computed(() => +props.itemHeightWithUnit.replace(new RegExp(itemHeightUnit.value, 'gi'), ''))
     function setItemTranslateY(idx: number, number: number) {
-      itemTranslateYs.value[idx] = { transform: 'translateY(0)' }
+      itemTranslateYs.value[idx] = {
+        transform: `translateY(${
+          (props.reverseRollDirection
+            ? (number - 9) * itemHeightNumber.value
+            : -number * itemHeightNumber.value).toString() + 'px'
+        })`,
+      }
     }
 
-
     watch([
+      itemHeightNumber,
       () => props.start,
-      () => props.itemHeightWithUnit,
       () => props.totalLength,
       () => props.reverseRollDirection,
     ], init, { immediate: true })
@@ -118,20 +117,23 @@ export default defineComponent({
 
     return () => h(
       'ul',
-      { class: 'vue-number-roll-reset m0 p0 list-none overflow-hidden inline-flex' },
-      itemTranslateYs.value.map((item, index) => h(
+      {
+        class: 'vue-number-roll-reset m0 p0 list-none overflow-hidden inline-flex',
+        ref: el => vueNumberRollRef.value = el as HTMLElement,
+      },
+      itemTranslateYs.value.map((_, index) => h(
         'li',
         {
           class: `${ props.itemClass } transition-property-transform box-border mt0 mb0`,
-          style: { height: props.itemHeightWithUnit },
+          style: { height: itemHeightNumber.value.toString() + 'px' },
         },
         [
           h(
             'div',
             {
-              class: 'm0 p0 flex-(~ justify-center items-center box-border)',
+              class: 'flex-(~ justify-center items-center box-border)',
               style: [
-                itemTranslateYs.value[index - 1],
+                itemTranslateYs.value[index],
                 {
                   'transition-duration': props.transitionDuration,
                   'transition-timing-function': props.transitionTimingFunction,
@@ -140,9 +142,9 @@ export default defineComponent({
               ],
             },
             [ ...new Array<void>(10) ].map((_, index) => h(
-              'p',
-              { style: { height: props.itemHeightWithUnit } },
-              `${ props.reverseRollDirection ? 10 - index : index - 1 }`,
+              'div',
+              { class: 'lh-none' },
+              `${ props.reverseRollDirection ? 9 - index : index }`,
             )),
           ),
         ],