Win Design

Loading 加载

代码演示

基础用法

自定义指令v-loading，只需要绑定Boolean即可。

查看代码 < />

<template>
  <section class="spin-demo">
    <w-table :data="tableData"
      v-loading="loading"
      :stripe="config.stripe"
      :border="config.border"
      style="width: 100%">
      <w-table-column prop="time" label="就诊时间">
      </w-table-column>
      <w-table-column prop="name" label="姓名" width="180">
      </w-table-column>
      <w-table-column prop="status" label="签约状态" width="180">
      </w-table-column>
      <w-table-column prop="type" label="医保类型">
      </w-table-column>
    </w-table>
  </section>
</template>

<script>
export default {
  data () {
    return {
      config: {
        border: false,
        stripe: false
      },
      tableData: [{
        time: '2019.05.12 11:02:33',
        status: '其他区签约',
        name: '赵宇翔',
        type: '其他'
      }, {
        time: '2019.05.12 12:24:30',
        status: '未签约',
        name: '肖新宇',
        type: '本地医保'
      }, {
        time: '2019.05.13 08:15:10',
        status: '已签约',
        name: '陈慕杰',
        type: '本地医保'
      }, {
        time: '2019.05.14 09:23:09',
        status: '未签约',
        name: '李自然',
        type: '本地医保'
      }, {
        time: '2019.05.15 08:45:48',
        status: '未签约',
        name: '尤道礼',
        type: '本地医保'
      }],
      loading: true
    }
  }
}
</script>
<style lang="scss">
.spin-demo {
  table {
    margin: 0;
  }
  .w-table {
    margin-top: 20px;
  }
}
</style>

自定义

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

查看代码 < />

<template>
  <section class="spin-demo">
    <w-table :data="tableData"
      v-loading="loading"
      win-loading-text="加载中……"
      win-loading-spinner="w-icon-loading"
      win-loading-background="rgba(0, 0, 0, 0.8)"
      :stripe="config.stripe"
      :border="config.border"
      style="width: 100%">
      <w-table-column prop="time" label="就诊时间">
      </w-table-column>
      <w-table-column prop="name" label="姓名" width="180">
      </w-table-column>
      <w-table-column prop="status" label="签约状态" width="180">
      </w-table-column>
      <w-table-column prop="type" label="医保类型">
      </w-table-column>
    </w-table>
  </section>
</template>

<script>
export default {
  data () {
    return {
      config: {
        border: false,
        stripe: false
      },
      tableData: [{
        time: '2019.05.12 11:02:33',
        status: '其他区签约',
        name: '赵宇翔',
        type: '其他'
      }, {
        time: '2019.05.12 12:24:30',
        status: '未签约',
        name: '肖新宇',
        type: '本地医保'
      }, {
        time: '2019.05.13 08:15:10',
        status: '已签约',
        name: '陈慕杰',
        type: '本地医保'
      }, {
        time: '2019.05.14 09:23:09',
        status: '未签约',
        name: '李自然',
        type: '本地医保'
      }, {
        time: '2019.05.15 08:45:48',
        status: '未签约',
        name: '尤道礼',
        type: '本地医保'
      }],
      loading: true
    }
  }
}
</script>
<style lang="scss">
.spin-demo {
  table {
    margin: 0;
  }
  .w-table {
    margin-top: 20px;
  }
}
</style>

尺寸选择

通过参数size设置大小，注意为自定义模式时，大小无效。

查看代码 < />

<template>
  <section class="spin-demo">
    <w-table :data="tableData"
      v-loading="loading"
      win-loading-size="large"
      :stripe="config.stripe"
      :border="config.border"
      style="width: 100%">
      <w-table-column prop="time" label="就诊时间">
      </w-table-column>
      <w-table-column prop="name" label="姓名" width="180">
      </w-table-column>
      <w-table-column prop="status" label="签约状态" width="180">
      </w-table-column>
      <w-table-column prop="type" label="医保类型">
      </w-table-column>
    </w-table>
  </section>
</template>

<script>
export default {
  data () {
    return {
      config: {
        border: false,
        stripe: false
      },
      tableData: [{
        time: '2019.05.12 11:02:33',
        status: '其他区签约',
        name: '赵宇翔',
        type: '其他'
      }, {
        time: '2019.05.12 12:24:30',
        status: '未签约',
        name: '肖新宇',
        type: '本地医保'
      }, {
        time: '2019.05.13 08:15:10',
        status: '已签约',
        name: '陈慕杰',
        type: '本地医保'
      }, {
        time: '2019.05.14 09:23:09',
        status: '未签约',
        name: '李自然',
        type: '本地医保'
      }, {
        time: '2019.05.15 08:45:48',
        status: '未签约',
        name: '尤道礼',
        type: '本地医保'
      }],
      loading: true
    }
  }
}
</script>
<style lang="scss">
.spin-demo {
  table {
    margin: 0;
  }
  .w-table {
    margin-top: 20px;
  }
}
</style>

全局加载

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

查看代码 < />

<template>
  <section class="spin-demo">
    <w-button
      type="primary"
      @click="openFullScreen"
      v-loading.fullscreen.lock="fullscreenLoading">
      指令方式
    </w-button>
    <w-button
      type="primary"
      @click="openScreen">
      服务方式
    </w-button>
  </section>
</template>

<script>
export default {
  data () {
      return {
        fullscreenLoading: false
      }
  },
  methods: {
    openFullScreen () {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 2000);
    },
    openScreen () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'w-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    }
  }
}
</script>
<style lang="scss">
</style>

API

Options

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

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/17/2020, 8:46:00 PM

← Skeleton 骨架屏 →