import { Loading } from ‘element-ui’;Loading.service(options);如何配置option,并提供完整的调用代码

`import { Loading } from 'element-ui';` 这行代码导入了Element UI库中的Loading组件。`Loading.service(options)` 是为了注册服务插件，用于在Vue应用中管理加载状态。

`options` 参数是一个配置对象，可以包含以下选项：

1. `el` (默认值为 '#loading')：指定元素ID，用于显示加载动画，默认是在页面上查找id为 'loading' 的元素，如果没有则创建一个新的。

2. `duration`：设置加载动画的持续时间（毫秒），默认为3000ms。

3. `lock`：是否锁定其他Loading实例（阻止同时展示多个加载框），默认为`true`。

4. `text` 或者 `tip`：自定义加载提示文字。

5. `mask`：是否显示遮罩层，默认为`true`。

6. `customClass`：自定义CSS类名。

完整的调用代码示例如下：

// 引入Element UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 注册Loading服务
Vue.use(ElementUI, {
  loading: {
    spinner: 'el-icon-loading', // 自定义加载图标，如需自定义样式可传入字符串
    tip: '正在加载...', // 加载提示文本
    duration: 2000, // 设置默认加载时长
    mask: false, // 可选择关闭遮罩层
  },
});

// 使用Loading组件
export default {
  data() {
    return {
      showLoading: false,
    };
  },
  methods: {
    async fetchData() {
      this.showLoading = true;
      await new Promise((resolve) => setTimeout(resolve, 2000)); // 模拟异步操作
      this.showLoading = false;
    },
  },
  mounted() {
    this.fetchData();
  },
};

在这个例子中，我们在`methods`中定义了一个异步方法`fetchData`，当需要加载数据时，会先开启加载状态，然后等待2秒钟模拟数据加载完成，最后关闭加载状态。