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

���人不如求己

你不知道的loading使用方式

• 1. 指令方式使用
• • 1.1 默认loading
  • 1.2 自定义loading
  • 1.3 整页加载
  • 2. 服务方式使用
  • • 2.1 this.$loading的使用
    • 2.2 Loading.service的使用

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

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

      （）

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

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

      1. 指令方式使用

      1.1 默认loading

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

      使用方式如下：

              指定loading插入区域    export default {  name: "loading",  data() {    return {      loading: false    };  },  mounted() {    this.loading = true;    setTimeout(() => {      this.loading = false;    }, 2 * 1000);  }};

      1.2 自定义loading

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

      使用方式如下：

           指定loading插入区域  export default {  name: "loading",  data() {    return {      loading: false    };  },  mounted() {    this.loading = true;    setTimeout(() => {      this.loading = false;    }, 2 * 1000);  }};

      1.3 整页加载

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

      使用方式如下：

            整页加载loading  export default {  name: "loading",  data() {    return {      loading: false    };  },  mounted() {    this.loading = true;    setTimeout(() => {      this.loading = false;    }, 2 * 1000);  }};

      2. 服务方式使用

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

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

      2.1 this.$loading的使用

            服务方式开启loading  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);    }  }};

      2.2 Loading.service的使用

            开启loading  import { Loading } from "element-ui";export default {  name: "loading",  data() {    return {};  },  methods: {    openLoading() {      let loadingInstance = Loading.service(options);      this.$nextTick(() => {        // 以服务的方式调用的 Loading 需要异步关闭        loadingInstance.close();      });    }  }};