Element Plus 按需加载 loading 样式没生效，答案就在这里！

在使用Element Plus时，很多人可能会遇到按需加载 loading 样式不起作用的问题。这可能是由于您没有正确地导入样式文件造成的。

Element Plus 提供了两种方式来导入样式文件：

1. 使用CDN：

<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">

2. 使用npm：

npm install element-plus

import 'element-plus/dist/index.css'

如果您使用的是按需加载的方式，那么您需要在您的代码中明确地导入 loading 的样式文件：

import 'element-plus/packages/loading/style/css'

Element Plus按需加载 loading 样式问题案例

<template>
  <el-button :loading="loading">
    点我
  </el-button>
</template>

<script>
import { ElButton } from 'element-plus'
import 'element-plus/packages/loading/style/css'

export default {
  components: { ElButton },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

在这个例子中，我们使用了按需加载的方式来引入 Element Plus 的组件和样式。在 import 语句中，我们明确地导入了 loading 的样式文件。这样，当我们运行这个组件时，loading 的样式就会正常显示了。

除了导入样式文件之外，您还需要确保您在使用 loading 时正确地设置了 loading 属性。loading 属性是一个布尔值，当其为 true 时，组件将显示 loading 状态。

Element Plus 按需加载 loading 样式没生效原因总结

• 没有正确地导入 loading 的样式文件。
• 没有正确地设置 loading 属性。

Element Plus 按需加载 loading 样式没生效解决办法

• 确保您正确地导入了 loading 的样式文件。
• 确保您正确地设置了 loading 属性。