Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-04 21:05:41 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
f5f9484b4370f115a0f3d23c41fcee9abcdf3bd8
f5f9484b
1 parent
9f66abff
feat(组件): 添加动态字体大小调整功能
为积分显示组件添加根据数字长度自动调整字体大小的功能,确保长数字的可读性
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
42 additions
and
4 deletions
src/components/PointsCollector.vue
src/components/TotalPointsDisplay.vue
src/components/PointsCollector.vue
View file @
f5f9484
...
...
@@ -4,7 +4,7 @@
<view class="center-circle">
<view class="total-points" @tap="handleGoToRewards">
<text v-if="!isOwner" class="family-points-label">家庭总积分</text>
<text class="points-number">{{ animatedTotalPoints }}分</text>
<text class="points-number"
:style="{ fontSize: dynamicFontSize }"
>{{ animatedTotalPoints }}分</text>
<text v-if="isOwner" class="points-label">去兑换</text>
</view>
</view>
...
...
@@ -35,7 +35,7 @@
</template>
<script setup>
import { ref, onMounted, defineProps, defineExpose, defineEmits, watch } from 'vue'
import { ref, onMounted, defineProps, defineExpose, defineEmits, watch
, computed
} from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { collectPointAPI } from '@/api/points'
...
...
@@ -68,6 +68,25 @@ const animatedTotalPoints = ref(props.totalPoints) // 动画中的总积分
const floatingItems = ref([]) // 漂浮的积分项
const isCollecting = ref(false) // 是否正在收集,防止重复触发
/**
* 根据数值长度动态计算字体大小
*/
const dynamicFontSize = computed(() => {
const pointsStr = animatedTotalPoints.value + '分'
const length = pointsStr.length
// 基础字体大小36rpx,超过6位数开始缩小
if (length <= 6) {
return '36rpx'
} else if (length <= 8) {
return '32rpx'
} else if (length <= 10) {
return '28rpx'
} else {
return '24rpx'
}
})
// source_type 中英文映射
const sourceTypeMap = {
'WALKING': '步数积分',
...
...
src/components/TotalPointsDisplay.vue
View file @
f5f9484
...
...
@@ -4,7 +4,7 @@
<view class="center-circle1">
<view class="total-points" @tap="handleGoToRewards">
<text v-if="!isOwner" class="family-points-label">家庭总积分</text>
<text class="points-number">{{ animatedTotalPoints }}分</text>
<text class="points-number"
:style="{ fontSize: dynamicFontSize }"
>{{ animatedTotalPoints }}分</text>
<text v-if="isOwner" class="points-label">去兑换</text>
</view>
</view>
...
...
@@ -12,7 +12,7 @@
</template>
<script setup>
import { ref, watch, onMounted, defineProps } from 'vue'
import { ref, watch, onMounted, defineProps
, computed
} from 'vue'
import Taro from '@tarojs/taro'
// 定义props
...
...
@@ -36,6 +36,25 @@ const props = defineProps({
const animatedTotalPoints = ref(0)
/**
* 根据数值长度动态计算字体大小
*/
const dynamicFontSize = computed(() => {
const pointsStr = animatedTotalPoints.value + '分'
const length = pointsStr.length
// 基础字体大小36rpx,超过6位数开始缩小
if (length <= 6) {
return '36rpx'
} else if (length <= 8) {
return '32rpx'
} else if (length <= 10) {
return '28rpx'
} else {
return '24rpx'
}
})
/**
* 数字滚动动画
* @param {number} start - 动画开始值
* @param {number} end - 动画结束值
...
...
Please
register
or
login
to post a comment