loading 安装vue-loading-overlay

2019-07-12  本文已影响0人  xiesen

使用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>
   

上一篇 下一篇

猜你喜欢

热点阅读