使用npm安装vue-loading-overlay
npm install vue-loading-overlay --save
在main.js文件中配置
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
Vue.use(Loading);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
使用
<template>
<div>
<button @click="showLoading">显示loading</button>
</div>
</template>
<script>
import browser from '../utils/browserEnvironment.js'
export default {
methods: {
showLoading(){
let loader = this.$loading.show()
// let loader = this.$loading.show({
// opacity: 1.0,
// color: '#ffffff',
// backgroundColor: '#19243A'
// })
setTimeout(() => {
loader.hide()
}, 3000);
}
}
}
</script>
网友评论