Vue加载组件

Question

我想为组件实现加载功能。

我的想法是创建一个HOC（高阶组件），它将接收其中的内容，并负责管理加载状态及其文本，以及没有点击事件通过。

<loading-hoc :active="loading">
    <my-component></my-component>
</loading-hoc>

我实现了这个，在Vue开发工具中，我得到了这个：

然后我环顾四周，找到了ElementUI的实现，这是一个指令，并将DOM元素添加到当前组件，看起来像this。

问题：

不同方法的优点和缺点是什么？有没有正确的方法呢？

我认为：

a）用作HOC：

• dev-tools中的详细树（减号）

b）使用指令

• DOM节点从组件外部添加到组件中（减号）

Answer 1

最简单的方法是在data属性中添加一个初始化为[toc]的属性加载，并使用它来使用true

控制加载元素的可见性

简单演示：

v-if

<强>脚本

<div id="app">
    <div v-if="loading" class="loading">Loading...</div>

    <h5>{{content}}</h5>
</div>

以下是演示fiddle