当前位置: 首页 > 文档资料 > VUX 中文文档 >

Loading 组件使用教程

优质
小牛编辑
130浏览
2023-12-01

安装

import { Loading } from 'vux'

export default {
  components: {
    Loading
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Loading } from 'vux'

Vue.component('loading', Loading)

该组件支持以plugin形式调用:

import  { LoadingPlugin } from 'vux'
Vue.use(LoadingPlugin)

// 或者umd方式
// 引入构建的js文件
Vue.use(vuxLoadingPlugin)
// 显示
this.$vux.loading.show({
 text: 'Loading'
})

// 隐藏
this.$vux.loading.hide()

// 获取显示状态
this.$vux.loading.isVisible() // true or false, v2.9.1 版本支持

loading同样支持在vue外直接使用,请参照 https://github.com/airyland/vux/blob/v2/docs/examples/loading.html

从v2.7.8版本开始以组件形式调用增加delay参数,从而实现延时显示.

属性

名字类型默认值说明版本要求
showbooleanfalse显示状态,在 v2.5.7 前使用v-model绑定,后面直接使用 :show 绑定--
textstring加载中提示文字,值为空字符时隐藏提示文字--
positionstringfixed定位方式,默认为fixed,在100%的布局下用absolute可以避免抖动--
transitionstringvux-mask显示动画名字--

插槽

名字说明版本要求
默认插槽提示文字区域--

样式变量

名字默认值说明继承自变量
@loading-z-index 5001z-index