vue1 directive, show loading block in any element
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4fe7850 Oct 20, 2016
Permalink
Failed to load latest commit information.
build add options.bg, fix webpack config Apr 11, 2016
dev update demo Apr 25, 2016
dist add options.bg, fix webpack config Apr 11, 2016
src Solved #2 Aug 6, 2016
.babelrc update Apr 9, 2016
.gitignore add options.bg, fix webpack config Apr 11, 2016
README.md Update README.md Apr 11, 2016
package.json add options.bg, fix webpack config Apr 11, 2016

README.md

vue-loading

Vue directive for show loading block in any element.

Live demo and usage

Build by vue-cli and vue-cli-component

Usage

General usage

<script>
    import loading from 'vue-loading';
    export default {
        directives: { loading },
        data () {
            return { isLoading: false }
        }
    }
</script>

<template>
    <div v-loading="isLoading" :loading-options="{ options }"></div>
    <!--click the button will show the loading block.-->
    <button @click="isLoading = true"></button>
</template>

You can also use vue-loading with vue-router $loadingRouteData

<script>
    export default {
        router: {
            data (transition) {
                // the vue-loading is show.

                window.setTimeout(() => {
                    // the vue-loading will closed after next().
                    transition.next();
                }, 3000);
            }
        }
    }
</script>

<template>
    <div v-loading="$loadingRouteData"></div>
</template>

Options

text:

  • loading block text
  • default value: "Loading ..."

bg:

  • loading block backgroundColor css,
  • default value: "rgba(230, 233, 236, 0.8)"