基于Vue2和SCSS中getter的值的动态进度条长度

Question

我正在寻找一种(或多种(方法，在@keyframe中动态设置scs中进度条的长度(请参阅代码中的注释(。每次值更改时，我都会从getters(getTasksFulfumentRate(中提取值。我的问题是：如何有效地将html(或脚本(中的值传递到scs中的变量中，以便在我的风格中使用？

希望描述足够清楚。

简化代码笔示例

我的html

<div class="tasks-summary-container">
<div class="progress">
<div
class="progress-value"
>
{{ getTasksFulfilmentRate }} %
</div>
</div>
</div>

脚本：

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
computed: {
...mapGetters('tasks', [
'completedTaskCount',
'notCompletedTaskCount',
'getTasksFulfilmentRate',
]),
...mapState(['projects', 'activeFilter']),
},
methods: {
...mapActions(['setCategoryFilter']),
filterCategory($event) {
const selectedCategory = $event.target.getAttribute(
'data-category'
);
this.setCategoryFilter(selectedCategory);
},
},
};
</script>

store.js(碎片(

getters: {
completedTaskCount: state => {
return state.tasks.filter(task => task.isCompleted).length || 0;
},
notCompletedTaskCount: state => {
return state.tasks.filter(task => !task.isCompleted).length || 0;
},
getTasksFulfilmentRate: (state, getters) => (getters.completedTaskCount / getters.getTotalTaskCount) * 100,
},

scs:

.progress {
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 3px;
display: flex;
height: 20px;
width: 100%;
&-value {
animation: load 2s normal forwards;
box-shadow: 0 10px 40px -10px;
border-radius: 100px;
background: variables.$primary-color;
height: 20px;
padding: 1px 0;
margin-bottom: 2rem;
text-align: center;
width: 0;
}
}
@keyframes load {
0% {
width: 0;
}
100% {
width: 70%; // here goes the value from getter
}
}

Answer 1

您可以定义一个自定义css属性，并在样式中使用该属性：

<div 
class="tasks-summary-container" 
:style="{
'--progress-value': getTasksFulfilmentRate + '%' // custom css prop
}"
>
<div class="progress">
<div class="progress-value">
70 %
</div>
</div>
</div>

和：

@keyframes load {
0% {
width: 0;
}
100% {
width: var(--progress-value) // here goes the value from getter
}
}