feat(App.vue): 添加警告样式和计算公式优化

This commit is contained in:
conglinyizhi 2024-10-06 21:01:52 +08:00
parent 032e8d694d
commit 2530f6a976
1 changed files with 12 additions and 2 deletions

View File

@ -1,7 +1,8 @@
<template> <template>
<div> <div>
M{{ selectIndex }}.0 开始占用 {{ selectIndexWidth + 1 }} Byte最大可以表示无符号数字 {{ (selectIndexWidth + 1) * 8 }} M{{ selectIndex }}.0 开始占用 {{ selectIndexWidth + 1 }} Byte ( {{ selectIndexWidth + 1 }} * 8 = {{
{{ getMaxNumber() }} (selectIndexWidth
+ 1) * 8 }} M ) 最大可以表示无符号数字 {{ getMaxNumber() }}
<button @click="selectIndexWidth = 0"> <button @click="selectIndexWidth = 0">
<span v-show="selectIndexWidth == 0">激活=></span>MB</button> <span v-show="selectIndexWidth == 0">激活=></span>MB</button>
<button @click="selectIndexWidth = 1"> <button @click="selectIndexWidth = 1">
@ -27,6 +28,7 @@ const selectIndexWidth = ref(1)
function getClassName(i) { function getClassName(i) {
const min = selectIndex.value const min = selectIndex.value
const max = selectIndexWidth.value + selectIndex.value const max = selectIndexWidth.value + selectIndex.value
if (Math.max(max, 30) === max && Math.min(i, min) === min) return 'warn'
if (Math.min(min, i) === min && Math.max(max, i) === max) return 'select' if (Math.min(min, i) === min && Math.max(max, i) === max) return 'select'
return '' return ''
} }
@ -58,5 +60,13 @@ function getMaxNumber() {
.select { .select {
background-color: #6cf; background-color: #6cf;
.key {
color: black
}
}
.warn {
background-color: red;
} }
</style> </style>