Loading 加载 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

加载数据时显示动效。

规则

使用 v-loading 指令方式
分为局部使用与全局使用

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { Loading } from '@21cnfe/vui'  
Vue.use(Loading.directive);

代码演示

Loading 加载 loadings

区域加载组件库提供了 v-loading 指令，用于在添加了指令的区域内使用加载动画

<template>
  <div title="基本用法" v-loading="loading"></div>
</template>
<script>
export default {
  data () {
    loading: true
  }
}
</script>

整页加载通过设置修饰符也可对整个 body 添加加载动画

<template>
  <div title="全屏加载：允许滚动" v-loading.fullscreen="loading"></div>
  <div title="全屏加载：禁止滚动" v-loading.fullscreen.lock="loading"></div>
</template>
<script>
export default {
  data () {
    loading: true
  }
}
</script>

自定义可自定义加载文案、图标尺寸和背景色

<template>
  <div title="自定义属性" v-loading="loading" ok-loading-size="md" ok-loading-text="加载中文本" ok-loading-background="transparent"></div>
</template>
<script>
export default {
  data () {
    loading: true
  }
}
</script>

API

属性	说明	类型	默认值
`v-loading`	自定义指令加载	Boolean	`false`
`fullscreen`	v-loading 指令的修饰符，是否将加载动画添加到body上，充满整个屏幕	Boolean	`false`
`lock`	v-loading 指令的修饰符，添加了 `fullscreen` 修饰符后，是否不允许滑动	Boolean	`false`
`ok-loading-text`	自定义指令加载文本信息	String	`--`
`ok-loading-size`	自定义指令加载图标尺寸	String	`lg`
`ok-loading-background`	自定义指令加载背景色	String	`hsla(0,0%,100%,.9)`

1. Loading 加载 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Loading 加载 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Loading 加载 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用