vue-nice-loading

Demo: 'https://www.liyu.fun/vue-nice-loading'

Demo源码示例： 'demo.vue'

安装

npm i vue-nice-loading

在main.js中引入

import loading from 'vue-nice-loading'

Vue.use(loading)

使用Vue.use初始化后会在vue原型上注册$loading，调用$loading方法显示loading，并返回实例，调用实例的close方法可以关闭该loading

// 显示loading
let loading = this.$loading({
  text: 'loading'
})
// 关闭loading
setTimeout(() => {
  loading.close();
}, 3000)

支持直接引入js文件的使用方式

$loading方法接受以下参数

type

loading显示的种类，这里使用的所有svg图片取自'SVG-Loaders', 接受值与图片名相同，默认值为ball-triangle，共有以下12种

• audio
• ball-triangle
• bars
• circles
• grid
• hearts
• oval
• puff
• rings
• spinning-circles
• tail-spin
• three-dots

this.$loading({
  type: 'bars'
})

target

loading需要覆盖的dom节点, 可传入一个dom对象或选择器的字符串，默认为body，显示全屏loading

this.$loading({
  target: '#app'
  // target: this.$refs.app
  // target: document.querySelector('#app')
})

text

显示文本，默认为空

this.$loading({
  text: 'Loading...'
})

background

遮罩层背景色

this.$loading({
  background: '#333'
})

delay

延时显示，单位为毫秒，以下例子会在1s后显示

this.$loading({
  delay: 1000
})

技术支持

'SVG-Loaders' 'ElementUI'