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.

tony19 · Accepted Answer · 2022-07-15 00:55:03Z

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

edited Jul 15, 2022 at 0:55

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 29, 2019 at 15:14

Mateusz Kołodziejczyk

211 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related