Loading 加载层

基础用法

<template>
  <plv-button @click="open">打开加载层</plv-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const loading = this.$loading();
        setTimeout(() => {
          loading.close();
        }, 3000);
      }
    }
  };
</script>

显示代码

mixin用法

<template>
  <plv-button @click="open">打开加载层</plv-button>
</template>

<script>
  import { Loading } from 'polyv-ui';

  export default {
    mixins: Loading ? [Loading.loadingMixin] : [],

    methods: {
      open() {
        this.isLoading = true;
        setTimeout(() => {
          this.isLoading = false;
        }, 3000);
      }
    }
  };
</script>

显示代码

局部加载用法

使用 v-loading 指令方式进行局部加载，dom 需要配置相对定位 relative 或 absolute。

<template>
  <div>
    <div v-loading="loading" class="demo-loading-box">这是一个文本</div>
    <plv-button @click="loading = !loading">{{ loading ? '关闭' : '打开' }}加载层</plv-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  }
}
</script>

<style lang="scss">
.demo-loading-box {
  width: 200px;
  height: 100px;
  line-height: 100px;
  background: #2196f3;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
}
</style>

显示代码