https://github.com/Coffcer/vue-loading

vue1 directive, show loading block in any element
https://github.com/Coffcer/vue-loading

Last synced: 3 months ago
JSON representation

vue1 directive, show loading block in any element

• Host: GitHub
• URL: https://github.com/Coffcer/vue-loading
• Owner: Coffcer
• Created: 2016-04-09T11:17:40.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-20T10:26:29.000Z (over 8 years ago)
• Last Synced: 2024-09-19T12:49:07.158Z (4 months ago)
• Language: JavaScript
• Homepage: http://coffcer.github.io/vue-loading/
• Size: 415 KB
• Stars: 137
• Watchers: 7
• Forks: 31
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue-cn - vue-loading ★14
• awesome-vue - vue-loading - loading?style=social) - 元素中加载block的Vue指令 (UI组件)
• awesome-github-vue - vue-loading - 元素中加载block的Vue指令 (UI组件)
• awesome - vue-loading - 元素中加载block的Vue指令 (UI组件)
• awesome-github-vue - vue-loading - 元素中加载block的Vue指令 (UI组件)

README

        
# vue-loading

> Vue directive for show loading block in any element.

[Live demo and usage](http://coffcer.github.io/vue-loading/)

Build by [vue-cli](https://github.com/vuejs/vue-cli) and [vue-cli-component](https://github.com/Coffcer/component)

## Usage

General usage

```vue

    import loading from 'vue-loading';

    export default {

        directives: { loading },

        data () {

            return { isLoading: false }

        }

    }

    


    

    


```

You can also use `vue-loading` with vue-router [$loadingRouteData](http://vuejs.github.io/vue-router/en/pipeline/data.html#details)

```vue

    export default {

        router: {

            data (transition) {

                // the vue-loading is show.

                window.setTimeout(() => {

                    // the vue-loading will closed after next().

                    transition.next();

                }, 3000);

            }

        }

    }

    


```

## Options

**text:**  

* loading block text

* default value: "Loading ..."

 

**bg:** 

* loading block backgroundColor css, 

* default value: "rgba(230, 233, 236, 0.8)"