From 17ebe16f89a239723003904df5e3063bd2074ddf Mon Sep 17 00:00:00 2001
From: unknown <11309921+lvjiaxuan@users.noreply.github.com>
Date: Wed, 17 May 2023 23:43:43 +0800
Subject: [PATCH] feat: auto height
---
README.md | 8 +------
playgrounds/vue3/src/App.vue | 24 ++++++++++-----------
src/index.ts | 42 +++++++++++++++++++-----------------
3 files changed, 35 insertions(+), 39 deletions(-)
diff --git a/README.md b/README.md
index e85e503..3ce8d03 100644
--- 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
index 380da43..9f3af4c 100644
--- 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'
.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;
}
@@ -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%);
}
diff --git a/src/index.ts b/src/index.ts
index 4091620..aeba1f5 100644
--- 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(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(10) ].map((_, index) => h(
- 'p',
- { style: { height: props.itemHeightWithUnit } },
- `${ props.reverseRollDirection ? 10 - index : index - 1 }`,
+ 'div',
+ { class: 'lh-none' },
+ `${ props.reverseRollDirection ? 9 - index : index }`,
)),
),
],