Skip to content

Commit b93d8ac

Browse files
xiaolongyuanxiaolongyuan
committed
Signed-off-by: 筱龙缘 <794334212@qq.com>
1 parent 740ef06 commit b93d8ac

File tree

12 files changed

+1901
-567
lines changed

12 files changed

+1901
-567
lines changed

‎dist/vue-strap.js

Lines changed: 1603 additions & 562 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-strap.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-strap.min.js

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/example/spinnerDocs.vue

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="bs-docs-section" id="spnner">
3+
<h1 class="page-header"><a href="#spnner" class="anchor">Spnner</a></h1>
4+
<div class="bs-example">
5+
6+
<!-- Html controls start-->
7+
<div >
8+
<label>fixed <input type="checkbox" v-model="fixed"></label>
9+
<label>size
10+
<select v-model="size">
11+
<option v-for="option in sizes" v-bind:value="option.value">
12+
{{ option.text }}
13+
</option>
14+
</select>
15+
</label>
16+
</div>
17+
<!-- Html controls end-->
18+
19+
<!-- Html markup start-->
20+
<div >
21+
<button v-on:click="$broadcast('show::spinner')">show spinner</button>
22+
<spinner id="spinner-box" :size="size" :fixed="fixed" text="I will close in 2 secs"></spinner>
23+
</div>
24+
<!-- Html markup end-->
25+
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script type="es6">
31+
import spinner from 'src/Spinner.vue'
32+
33+
const sizes = [
34+
{
35+
text: 'sm',
36+
value: 'sm'
37+
}, {
38+
text: 'md',
39+
value: 'md'
40+
}, {
41+
text: 'lg',
42+
value: 'lg'
43+
}
44+
]
45+
46+
export default {
47+
data() {
48+
return {
49+
fixed: false,
50+
size: 'lg',
51+
sizes: sizes.concat({text: 'xl', value: 'xl'}),
52+
}
53+
},
54+
components: {
55+
spinner
56+
},
57+
events: {
58+
'shown::spinner'(id) {
59+
setTimeout(() => {
60+
this.$root.$broadcast('hide::spinner', id)
61+
}, 2000)
62+
}
63+
}
64+
}
65+
</script>

‎docs/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import selectDocs from './example/selectDocs.vue'
2222
import tabsDocs from './example/tabsDocs.vue'
2323
import tooltipDocs from './example/tooltipDocs.vue'
2424
import typeaheadDocs from './example/typeaheadDocs.vue'
25+
import spinnerDocs from './example/spinnerDocs.vue'
2526

2627
Vue.config.debug = true
2728

@@ -47,6 +48,7 @@ new Vue({
4748
tabsDocs,
4849
tooltipDocs,
4950
typeaheadDocs,
51+
spinnerDocs,
5052
list: {
5153
inherit: true,
5254
template: ''

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ <h1>VueStrap</h1>
4646
<tabs-docs></tabs-docs>
4747
<tooltip-docs></tooltip-docs>
4848
<typeahead-docs></typeahead-docs>
49+
<spinner-docs></spinner-docs>
4950
</div>
5051
<div class="col-md-3">
5152
<affix>

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@
3535
"babel-preset-es2015": "^6.1.18",
3636
"babel-runtime": "^6.3.19",
3737
"css-loader": "^0.21.0",
38+
"sass-loader": "^3.1.1",
39+
"node-sass": "^3.4.1",
40+
"less": "^2.5.3",
41+
"less-loader": "^2.2.1",
3842
"prismjs": "^1.3.0",
3943
"style-loader": "^0.13.0",
4044
"vue-hot-reload-api": "^1.2.0",

‎src/Spinner.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div class="spinner spinner-gritcode {{spinnerSize}} {{fixed ? 'spinner-fixed' : ''}}" v-show="active">
3+
<div class="spinner-wrapper">
4+
<div class="spinner-circle"></div>
5+
<div class="spinner-text">{{text}}</div>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script type="es6">
11+
// import styling
12+
import './spinner.scss'
13+
14+
const MIN_WAIT = 500 // in ms
15+
16+
export default {
17+
data() {
18+
return {
19+
active: false,
20+
}
21+
},
22+
props: {
23+
size: {
24+
type: String,
25+
default: 'md'
26+
},
27+
text: {
28+
type: String,
29+
default: ''
30+
},
31+
fixed: {
32+
type: Boolean,
33+
default: false
34+
}
35+
},
36+
computed: {
37+
spinnerSize() {
38+
return (this.size) ? `spinner-${this.size}` : `spinner-sm`
39+
}
40+
},
41+
methods: {
42+
getMinWait(delay) {
43+
delay = delay || 0
44+
return new Date().getTime() - this._started.getTime() < MIN_WAIT ? MIN_WAIT - parseInt(new Date().getTime() - this._started.getTime(), 10) + delay : 0 + delay
45+
},
46+
show(options) {
47+
if (options && options.text) {
48+
this.text = options.text
49+
}
50+
if (options && options.size) {
51+
this.size = options.size
52+
}
53+
if (options && options.fixed) {
54+
this.fixed = options.fixed
55+
}
56+
57+
// block scrolling when spinner is on
58+
this._body.style.overflowY = 'hidden'
59+
60+
// activate spinner
61+
this._started = new Date()
62+
this.active = true
63+
this.$root.$broadcast('shown::spinner')
64+
},
65+
hide() {
66+
const delay = 0
67+
this._spinnerAnimation = setTimeout(() => {
68+
this.active = false
69+
this._body.style.overflowY = this._bodyOverflow
70+
this.$root.$broadcast('hidden::spinner')
71+
}, this.getMinWait(delay))
72+
}
73+
},
74+
events: {
75+
'show::spinner'(options) {
76+
this.show(options)
77+
},
78+
'hide::spinner'() {
79+
this.hide()
80+
},
81+
'start::ajax'(options) {
82+
this.show(options)
83+
},
84+
'end::ajax'() {
85+
this.hide()
86+
}
87+
},
88+
destroyed() {
89+
clearTimeout(this._spinnerAnimation)
90+
this._body.style.overflowY = this._bodyOverflow
91+
},
92+
ready() {
93+
this._body = document.querySelector('body')
94+
this._bodyOverflow = this._body.style.overflowY || ''
95+
}
96+
}
97+
</script>

‎src/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import tabset from './Tabset.vue'
2121
import tooltip from './Tooltip.vue'
2222
import typeahead from './Typeahead.vue'
2323
import navbar from './Navbar.vue'
24+
import spinner from './Spinner.vue'
2425

2526
const VueStrap = {
2627
alert,
@@ -45,7 +46,8 @@ const VueStrap = {
4546
tabset,
4647
tooltip,
4748
typeahead,
48-
navbar
49+
navbar,
50+
spinner
4951
}
5052

5153
module.exports = VueStrap

‎src/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ export {tabset} from './Tabset.vue'
2121
export {tooltip} from './Tooltip.vue'
2222
export {typeahead} from './Typeahead.vue'
2323
export {navbar} from './Navbar.vue'
24+
export {spinner} from './Spinner.vue'

0 commit comments

Comments
 (0)