Loading 加载

加载数据时显示动效。

区域加载

在表格等容器中加载数据时显示。

<template>
  <jp-table v-loading="loading" :data="tableData" style="width: 100%">
    <jp-table-column prop="date" label="日期" width="180"></jp-table-column>
    <jp-table-column prop="name" label="姓名" width="180"></jp-table-column>
    <jp-table-column prop="address" label="地址"></jp-table-column>
  </jp-table>
</template>

<style>
body {
  margin: 0;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      loading: true
    }
  }
}
</script>

显示代码

自定义

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

<template>
  <jp-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%"
  >
    <jp-table-column prop="date" label="日期" width="180"></jp-table-column>
    <jp-table-column prop="name" label="姓名" width="180"></jp-table-column>
    <jp-table-column prop="address" label="地址"></jp-table-column>
  </jp-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      loading: true
    }
  }
}
</script>

显示代码

整页加载

页面数据加载时显示。

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用 lock 修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

<template>
  <div>
    <jp-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">指令方式</jp-button>
    <jp-button type="primary" @click="openFullScreen2">服务方式</jp-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreenLoading: false
    }
  },
  methods: {
    openFullScreen1() {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 2000)
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
    }
  }
}
</script>

显示代码

服务方式

<template>
  <div>
    <jp-button type="primary" @click="openFullScreen">服务方式</jp-button>
  </div>
</template>

<script>
import { Loading, Message, MessageBox, Notification, version } from '../../../../packages'
export default {
  data() {
    return {}
  },
  methods: {
    openFullScreen() {
      const loading = Loading.service({
        fullscreen: true,
        text: '页面渲染中...'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
    }
  }
}
</script>

显示代码

Options

参数	说明	类型	可选值	默认值
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	object/string	—	document.body
body	同 v-loading 指令中的 body 修饰符	boolean	—	false
fullscreen	同 v-loading 指令中的 fullscreen 修饰符	boolean	—	true
lock	同 v-loading 指令中的 lock 修饰符	boolean	—	false
text	显示在加载图标下方的加载文案	string	—	—
spinner	自定义加载图标类名	string	—	—
background	遮罩背景色	string	—	—
customClass	Loading 的自定义类名	string	—	—