element - - - - - 你不知道的loading使用方式

element - - - - - 你不知道的loading使用方式

求人不如求己

关于页面交互,最害怕的就是接口等待时间太长,用户体验不好。

而如何提高用户体验呢?接口返回速度这个是后端同学去优化,前端同学也可通过加载loading来优化体验

Element 提供了两种调用 Loading 的方法:指令和服务

详情可查看官网 : Element Loading 加载

1. 指令方式使用

1.1 默认loading

对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。

使用方式如下:

<template>
  <div v-loading="loading">
      指定loading插入区域
    </div>
</template>
<script>javascript">
export default {
  name: "loading",
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 2 * 1000);
  }
};
</script>
<style lang='scss' scoped>
</style>

1.2 自定义loading

在绑定了v-loading指令的元素上添加element-loading-text属性,其值会被渲染为加载文案,并显示在加载图标的下方。类似地,element-loading-spinnerelement-loading-background属性分别用来设定图标类名背景色值

使用方式如下:

<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
   指定loading插入区域
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 2 * 1000);
  }
};
</script>
<style lang='scss' scoped>
</style>

1.3 整页加载

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

使用方式如下:

<template>
  <div v-loading.fullscreen.lock="loading">
    整页加载loading
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 2 * 1000);
  }
};
</script>
<style lang='scss' scoped>
</style>

2. 服务方式使用

如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading,它的调用方式为:this.$loading(options),同样会返回一个 Loading 实例。

以服务的方式调用的 Loading 需要异步关闭

2.1 this.$loading的使用

<template>
  <div id="loading_dom">
    <el-button type="primary" @click="openLoading">服务方式开启loading</el-button>
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {};
  },
  methods: {
    openLoading() {
      // 开启loading
      const loadingInstance = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: "Loading", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.1)", //遮罩层颜色
        target: document.querySelector("#loading_dom") //loading覆盖的dom元素节点 默认插入body标签
      });

      // 关闭loading时机
      setTimeout(() => {
        loadingInstance.close();
      }, 2 * 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

2.2 Loading.service的使用

<template>
  <div>
    <el-button type="primary" @click="openLoading">开启loading</el-button>
  </div>
</template>
<script>
import { Loading } from "element-ui";
export default {
  name: "loading",
  data() {
    return {};
  },
  methods: {
    openLoading() {
      let loadingInstance = Loading.service(options);
      this.$nextTick(() => {
        // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
转载请说明出处内容投诉
CSS教程_站长资源网 » element - - - - - 你不知道的loading使用方式

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买