天猫精灵IoT开放平台
Loading 全局加载
更新时间：2019/05/21
访问次数：1152
import { Loading } from 'genie-ui'
// 开始全局加载
Loading.open()
// 关闭全局加载
Loading.close()
也可以使用插件方式加载
Vue.use(Loading)
Vue.extend({
methods: {
xxx: {
this.$loading.open()
}
}
})
Event
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| open | (options) | 打开全局 Loading 状态 |
| close | 无 | 关闭全局 Loading 状态 |
options 支持 text 和 duration 两个可选参数
- text 加载时，提示的文案
- duration 自动关闭全局 Loading 时间，默认值 0 表示不关闭
使用示例
<template>
<div>
<button @click="showLoading">点击显示 Loading</button>
</div>
</template>
<script>
import { Loading } from 'genie-ui'
export default {
components: {
},
methods: {
showLoading (v) {
console.log('opening')
Loading.open({
text: '加载中...', // 可选
// NOTE: 可以使用 duration 定时关闭，也可以调用 close 手动关闭
// duration: 5000
})
setTimeout(function () {
console.log('closing')
Loading.close()
}, 5000)
}
}
}
</script>
