├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── example
    ├── app.vue
    └── index.js
├── package-lock.json
├── package.json
└── src
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prettier.semi": false
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-delay
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/vue-delay.svg?style=flat-square)](https://www.npmjs.com/package/vue-delay)
 4 | ![vue](https://img.shields.io/badge/vue-2.x-4fc08d.svg?colorA=2c3e50&style=flat-square)
 5 | [![](https://img.shields.io/badge/%24-donate-green.svg?style=flat-square)](https://github.com/QingWei-Li/donate)
 6 | 
 7 | > 🐌 Delay rendering component for Vue.js
 8 | 
 9 | ## Installation
10 | 
11 | ```shell
12 | npm i vue-delay
13 | ```
14 | 
15 | ## Usages
16 | 
17 | ```javascript
18 | import Vue from 'vue'
19 | import Delay from 'vue-delay'
20 | 
21 | Vue.use(Delay)
22 | // or
23 | // new Vue({
24 | //  components: { Delay }
25 | // })
26 | ```
27 | 
28 | ```html
29 | <delay :wait="5000">
30 |   <h1>Hi Guys!</h1>
31 | </delay>
32 | ```
33 | 
34 | ## Options
35 | 
36 | ### wait
37 | 
38 | * Type: `Number`
39 | * Default: `0`
40 | 
41 | Waiting timestamp
42 | 
43 | ### from
44 | 
45 | * Type: `Number`
46 | * Default: `Date.now()`
47 | 
48 | Start timestamp
49 | 
50 | ## Slots
51 | 
52 | ### loading
53 | 
54 | ```html
55 | <delay :wait="5000">
56 |   <div slot="loading">Ahem...</div>
57 |   <h1>Hi Guys!</h1>
58 | </delay>
59 | ```
60 | 
61 | ## License
62 | 
63 | MIT
64 | 


--------------------------------------------------------------------------------
/example/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Vue Delay Demo</h1>
 4 | 
 5 |     <p>wait 2s</p>
 6 |     <delay class="box" :wait="2000">
 7 |       <div slot="loading">Ahem...</div>
 8 |       <h3>1111</h3>
 9 |     </delay>
10 | 
11 |     <p>wait 3s</p>
12 |     <delay class="box" :from="Date.now() + 1000" :wait="2000">
13 |       <h2>2222</h2>
14 |     </delay>
15 | 
16 |     <p>wait 4s</p>
17 |     <delay class="box" :wait="4000">
18 |       <h1>3333</h1>
19 |     </delay>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import Delay from '@/'
25 | import Vue from 'vue'
26 | 
27 | Vue.use(Delay)
28 | 
29 | export default {}
30 | </script>
31 | 
32 | <style>
33 | .box {
34 |   border: 1px solid #f0f0f0;
35 |   width: 200px;
36 |   margin-bottom: 40px;
37 |   height: 80px;
38 |   text-align: center;
39 | }
40 | </style>


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './app'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-delay",
 3 |   "version": "0.1.0",
 4 |   "description": "Delay rendering component for Vue.js",
 5 |   "main": "dist/vue-delay.js",
 6 |   "module": "src/index.js",
 7 |   "repository": "qingwei-li/vue-delay",
 8 |   "homepage": "https://cinwell.com/vue-delay/",
 9 |   "scripts": {
10 |     "test": "npm run build && echo ✌️",
11 |     "dev": "poi example",
12 |     "gh": "poi build example && gh-pages -d dist",
13 |     "build": "poi build --component VueDelay src"
14 |   },
15 |   "poi": {
16 |     "homepage": "./",
17 |     "removeDist": true
18 |   },
19 |   "keywords": ["vue", "delay", "component"],
20 |   "author": "qingwei-li <cinwell.li@gmail.com> (https://github.com/QingWei-Li)",
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "gh-pages": "^1.1.0",
24 |     "poi": "^9.5.4"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'Delay',
 3 | 
 4 |   props: {
 5 |     wait: {
 6 |       type: Number,
 7 |       default: 0
 8 |     },
 9 |     from: {
10 |       type: Number,
11 |       default: Date.now()
12 |     }
13 |   },
14 | 
15 |   data: () => ({
16 |     waiting: true
17 |   }),
18 | 
19 |   created() {
20 |     this.timer = setTimeout(() => {
21 |       this.waiting = false
22 |     }, this.from - Date.now() + this.wait)
23 |   },
24 | 
25 |   destroyed() {
26 |     clearTimeout(this.timer)
27 |   },
28 | 
29 |   render(h) {
30 |     return h(
31 |       'div',
32 |       this.waiting ? this.$slots.loading || null : this.$slots.default
33 |     )
34 |   },
35 | 
36 |   install(Vue, name) {
37 |     Vue.component(name || 'Delay', this)
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------