Question

我正在构建一个Vue应用程序，并且在页面中我添加了一个加载器，因为我在页面中绘制的图形需要很长时间才能显示。这是结构：

<template>
    <div>
        <button @click="changeLocalLoader">test</button>
        <div style="" :class="{test : localLoader}">
            <loader></loader>
        </div>
        <div ref="distribution" class="distribution-plot"></div>
    </div>
</template>

这是changeLocalLoader方法：

methods: {
    changeLocalLoader() {
        this.localLoader = !this.localLoader;
    },
},

然后，当我必须绘制图表时，我会执行以下操作：

        const drawGraph = function drawGraph(d) {
            this.changeLocalLoader();
            // building the graph
            ....
            // finishing building the graph
            this.changeLocalLoader();
        }

我添加的css属性（“测试”类）只是向加载器添加绝对位置和深色背景，因此覆盖了图形div。现在的问题是，如果我用测试按钮触发该行为，我可以看到图表被覆盖并再次显示，如果我再次单击该按钮，但如果我让绘图图形功能更改localLoader属性的值，则什么也没有更改。 localLoader变量的时机是可以的（我在console.log中），我无法真正理解该代码的错误。

编辑：这个观察者已经调用了const drawGraph：

xKey() {
    this.resizeListener();
},

调用resizeListener调用drawGraph每个轴的更改，并且它也在开始时调用以显示第一个图形。加载程序的值在控制台中是正确的

Answer 1

我解决了这个问题。问题是图表处理的数据太多而且渲染器停止工作。这就是为什么当我用按钮触发加载器（没有图表被处理）时，它没关系。

我所做的是添加一个条件类来修改加载器的z-index，并在图形渲染过程中将其放在所有内容之上。

Vue条件css并不总是触发

1 个答案: