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

Question

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

希望描述足够清楚。

simplified codepen example

我的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,
    },

scss:

.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
    }
}