請原諒我的新手，因為我只是一個初學者。我希望根據進度狀態顯示白色和黑色進度百分比。我嘗試了一些 if 陳述句，甚至為黑白進度狀態創建了一個新類，但到目前為止，我的成功率為零。
正如標題所說，我正在尋找一種方法來顯示 0-40% 的黑色文本和 60-100% 的白色文本，如果這可以通過少量代碼實作，那將是不可思議的。
如果有任何建議可以幸免，將不勝感激。
這是與此問題相關的代碼；
<template>
<div id="banner">
<span>Pallet Request</span>
<img src="./assets/pallet.svg" />
</div>
<KeepAlive>
<router-view />
</KeepAlive>
<div id="actionBarDiv">
<button v-if="$route.meta.backEnabled" id="backButton" @click="lastPage()">
<span>Back</span>
</button>
<div id="progressBar">
<span id="innerProgress" :style="{ width: progressState '%' }"></span>
<span id="innerProgressText">{{ progressState '%' }}</span>
</div>
<button id="nextButton" @click="nextPage()">
<span>Next</span>
</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
progressState: 0
}
},
methods: {
async nextPage() {
let tmpPath = '/';
switch (this.$route.name) {
case "welcome":
tmpPath = '/basicInfo'
this.progressState = 20
break;
case "basicInfo":
tmpPath = '/orderBasics'
this.progressState = 40
break;
case "orderBasics":
tmpPath = '/orderDetails'
this.progressState = 60
break;
case "orderDetails":
tmpPath = '/confirmation'
this.progressState = 80
break;
case "confirmation":
// if (confirm("Is all of your data correct?")) {
tmpPath = '/farewell'
this.progressState = 100
// } else {
// tmpPath = '/confirmation'
break;
case "farewell":
tmpPath = '/'
this.progressState = 0
break;
default:
break;
}
this.$router.push({
path: tmpPath,
});
},
async lastPage() {
let tmpPath = '/';
switch (this.$route.name) {
case "basicInfo":
tmpPath = '/'
this.progressState = 0
break;
case "orderBasics":
tmpPath = '/basicInfo'
this.progressState = 20
break;
case "orderDetails":
tmpPath = '/orderBasics'
this.progressState = 40
break;
case "confirmation":
tmpPath = '/orderDetails'
this.progressState = 60
break;
default:
break;
}
this.$router.push({
path: tmpPath,
});
},
},
});
</script>
這是薩斯
<style lang="sass">
html, body
height: 100%
margin: 0 !important
padding: 0 !important
#app
position: relative
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
background: white
font-family: 'Poppins', sans-serif
color: black
overflow-x: hidden
height: 100%
display: flex
flex-direction: column
</style>
<style lang="sass" scoped>
#banner
align-self: center
background: #ddd
width: 1200px
height: 150px
border-radius: 0 0 1rem 1rem
padding: 0 5rem
display: flex
flex-direction: row
align-items: center
justify-content: space-between
span
font-size: 2rem
img
max-width: 75px
#actionBarDiv
position: absolute
left: 0
bottom: 0
width: 100%
display: grid
grid-template-areas: ".backButton progressBar nextButton ."
grid-template-columns: 1fr 200px auto 200px 1fr
grid-template-rows: auto
gap: 1rem
background: $tertiary-background
padding: .75rem 0
*
user-select: none
#backButton
grid-area: backButton
justify-self: end
border: 1px solid $primary-accent-color
font-size: 1.5rem
border-radius: .25rem
cursor: pointer
padding: .25rem .75rem
transition: background .3s, color .3s
color: $primary-accent-color
background: transparent
// display: flex
flex-direction: row
justify-content: center
align-items: center
&:hover
color: $tertiary-background
background: $primary-accent-color
#nextButton
grid-area: nextButton
border: 1px solid $primary-accent-color
font-size: 1.5rem
border-radius: .25rem
cursor: pointer
padding: .25rem .75rem
transition: background .3s, color .3s
color: $primary-accent-color
background: transparent
justify-self: start
// display: flex
flex-direction: row
justify-content: center
align-items: center
&:hover
color: $tertiary-background
background: $primary-accent-color
#progressBar
grid-area: progressBar
justify-self: center
border-radius: .5rem
width: 20rem
user-select: none
background: lighten($tertiary-background, 50)
position: relative
overflow: hidden
#innerProgress
position: absolute
left: 0
top: 0
height: 100%
// width: 50%
background: $secondary-color
transition-property: width, background
transition-duration: 1s
transition-timing-function: ease
#innerProgressText
position: absolute
top: 5px
height: 100%
left: 50%
margin-right: -50%
transform: translate(-50%)
color: white
font-size: 1.1rem
</style>
再次感謝您，祝您有美好的一天。如果可以向我提出任何建議，將不勝感激。
uj5u.com熱心網友回復：
不處理類的最簡單方法是動態系結樣式：
<span
id="innerProgressText"
:style="{ color: progressState <= 40 ? 'black' : 'white' }"
>
{{ progressState '%' }}
</span>
在分類方法的情況下，我將為黑色文本創建另一個類（保留默認顏色為白色）。
.innerProgressText-black
color: black !important
并且，以與上述相同的方式動態附加該類：
<span
id="innerProgressText"
:class="{ 'innerProgressText-black': progressState <= 40 }"
>
{{ progressState '%' }}
</span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429979.html
下一篇：打字稿回傳任何東西，但承諾