vue 实现element-ui中的加载中状态

针对这个问题我将提供一份基本的思路和步骤。

思路

在 Element UI 中，它提供了一种自己的 loading 组件，用于展示加载状态。而它的实现方式是使用 Vue 在全局挂载了一个 $loading 对象，里面包含了一些属性、方法和事件。我们可以借鉴这个实现方式，来实现自己的加载中状态。

主要思路是：

在 Vue 的原型上定义一个名为 $loading 的对象
$loading 对象中包含以下属性：
show：用于标识是否展示加载状态
text：用于展示加载状态时的提示文字
background：用于展示加载状态时的背景颜色
$loading 对象中包含以下方法：
show：展示加载状态
hide：隐藏加载状态
定义一个 Vue 全局的混入，用于在所有组件中访问 $loading 对象。
在需要展示加载状态的组件中，可以通过调用 $loading.show() 方法来展示加载状态，通过 $loading.hide() 方法来隐藏。
另外，还可以使用自定义指令等方式来快速实现加载状态。

实现步骤

下面是具体的实现步骤：

1. 定义 $loading 对象

Vue.prototype.$loading = {
  show(text = '加载中', background = 'rgba(0, 0, 0, 0.7)') {
    const div = document.createElement('div')
    div.innerHTML = `
      <div style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: ${background};
        z-index: 9999; 
        display: flex;
        align-items: center;
        justify-content: center;
      ">
        <div style="
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
        ">
          <i class="el-icon-loading" style="
            font-size: 30px;
            margin-right: 10px;
            color: #fff;
          "></i>
          <span style="
            color: #fff;
            font-size: 16px;
          ">${text}</span>
        </div>
      </div>
    `
    document.body.appendChild(div)
  },

  hide() {
    const loading = document.querySelector('.loading')
    if (loading) {
      document.body.removeChild(loading)
    }
  }
}

2. 定义全局混入

Vue.mixin({
  mounted() {
    this.$loading = Vue.prototype.$loading
  }
})

3. 在需要展示加载状态的组件中使用

<template>
  <div>
    ...
    <button @click="getData">获取数据</button>
    ...
  </div>
</template>

<script>
export default {
  methods: {
    async getData() {
      try {
        this.$loading.show('数据加载中...')
        const res = await fetchData()
        // do something with res
      } catch (err) {
        console.log(err)
      } finally {
        this.$loading.hide()
      }
    }
  }
}
</script>

4. 使用自定义指令

Vue.directive('loading', {
  inserted(el, binding) {
    const text = binding.value || '加载中'
    const div = document.createElement('div')
    div.className = 'loading'
    div.innerHTML = `
    <div style="
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
    ">
      <i class="el-icon-loading" style="
        font-size: 30px;
        margin-right: 10px;
        color: #fff;
      "></i>
      <span style="
        color: #fff;
        font-size: 16px;
      ">${text}</span>
    </div>
    `
    el.style.position = 'relative'
    el.appendChild(div)
  },

  update(el, binding) {
    if (binding.value) {
      el.querySelector('.loading').style.display = 'flex'
    } else {
      el.querySelector('.loading').style.display = 'none'
    }
  },

  unbind(el) {
    const loading = el.querySelector('.loading')
    if (loading) {
      el.removeChild(loading)
    }
  }
})

使用自定义指令实现的效果如下：

<template>
  <div v-loading="loading">
    ...
    <button @click="getData">获取数据</button>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async getData() {
      try {
        this.loading = true
        const res = await fetchData()
        // do something with res
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

这样，在组件中使用 v-loading 指令即可实现加载状态的展示和隐藏。

至此，这就是实现 Vue 中加载中状态的完整攻略了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 实现element-ui中的加载中状态 - Python技术站