逛github的时候发现一些挺好看的svg图片，就想着自己用这些写一个vue的loading插件

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

Demo源码示例： ‘https://github.com/gitliyu/vue-nice-loading/blob/master/example/demo.vue’

Github地址： ‘https://github.com/gitliyu/vue-nice-loading’

安装

1

npm i vue-nice-loading

在main.js中引入

1
2
3

import loading from 'vue-nice-loading'

Vue.use(loading)

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

1
2
3
4
5
6
7
8

// 显示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

1
2
3

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

target

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

1
2
3
4
5

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

text

显示文本，默认为空

1
2
3

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

background

遮罩层背景色

1
2
3

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

delay

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

1
2
3

this.$loading({
  delay: 1000
})

技术支持

‘SVG-Loaders’
‘ElementUI’