2

我想在 div 标签内显示一个加载栏,并使用我在 vuejs 中的自定义指令控制它的显示。

例如,这是我的标签,我想隐藏其中的所有内容,只在其中显示加载栏。

模板 :

<div>
        <div class="data-container" v-loading-spin="loading">
            <!-- my content and other tags here -->
        </div>
</div>

加载栏标签:

<div class="loading-spinner">
            <!-- my loading bar -->
</div>

JS:

Vue.directive('loading-spin', {
    bind: function (el, binding, vnode) {
        if (binding.value == true) {
            // how to display loading and hide other content
        } else {
            // how to display content and delete loading bar
        }
    }
});

我怎样才能做到这一点?

谢谢。

4

1 回答 1

1

我认为使用 Vue 类绑定来实现这一点会更容易:https ://vuejs.org/v2/guide/class-and-style.html

<div v-bind:class="getClass">
</div>

computed: {
 getClass() {
    return this.loading ? 'loading-spinner' : 'data-container'
 }
于 2019-08-29T15:14:59.787 回答