How to display a custom loading bar and control it with custom directive in vuejs?

Question

I want to display a loading bar inside a div tag and control its display with my custom directive in vuejs.

for example, this is my tag and I want to hide all of the content inside it and only show loading bar inside it.

template :

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

loading bar tag:

<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
        }
    }
});

how can I do that?

thanks.

Answer 1

I think it would be easier to use Vue Class binding to achieve that: https://v2.vuejs.org/v2/guide/class-and-style.html

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

computed: {
 getClass() {
    return this.loading ? 'loading-spinner' : 'data-container'
 }