vue-bs-loadingbar

> VueJs와 bootstrap를 이용한 간단한 로딩바입니다.

설치

yarn add vue-bs-loadingbar --dev

설정

``
import loadingbar from 'vue-bs-loadingbar'

Vue.use( loadingbar )
`

Vue

`


export default {
name: 'app',
components : {
// 'loadingbar' : loadingbar
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
isShow : true
}
},
methods : {
loadingbar1 : function() {
//3초후 자동으로 사라짐
this.showLoadingBar(3000)
},
loadingbar2 : function() {
//3초후 자동으로 사라짐, 그리고 alert 메세지를 2초간 보여줌
this.showLoadingBar({milliSec :3000, countDown:2, alertMsg : '응답시간 초과'})
},
loadingbar3 : function() {
//3초후 자동으로 사라짐, 그리고 alert 메세지를 보여줌
this.showLoadingBar({milliSec :3000, alertMsg : '응답시간 초과'})
},
loadingbar5 : function() {
//로딩바를 계속 보여줌
this.showLoadingBar()
},
showHiding : function() {
//ajax를 call 하기전 loadingbar를 보여줌
this.showLoading()
this.$http.get('url.......')
.then((r) => {
//ajax 호출 후, loadingbar를 숨긴다.
this.hideLoading()
})
}
}
}


``

!캡쳐화면