使用ElLoading.service如何自定义图标为vue组件

您可以通过在组件中引入一个自定义的 loading 组件，然后在调用 ElLoading.service() 时传入该组件名来实现自定义图标。具体操作步骤如下：

1. 编写自定义 loading 组件，例如 MyLoading.vue。

2. 在需要使用 ElLoading.service() 的组件中引入 MyLoading.vue 组件：

<template>
  <div>
    <!-- 其他组件内容 -->
    <my-loading></my-loading>
  </div>
</template>
<script>
import MyLoading from 'path/to/MyLoading.vue'
export default {
  components: {
    MyLoading
  }
  // 其他选项
}
</script>

3. 在调用 ElLoading.service() 时传入组件名：

import {ElLoading} from 'element-ui'
// ...
const loadingInstance = ElLoading.service({
  text: 'Loading...',
  lock: true,
  spinner: 'my-loading' // 传入组件名
})
// ...

这样就可以通过自定义 loading 组件来使用 ElLoading.service()，并实现自定义 loading 图标了。

相关问题

ElLoading.service

ElLoading.service 是一个由 Element UI 框架提供的 Loading 加载指示器服务。该服务可以在页面中显示一个 Loading 指示器，以提示用户正在进行某些操作，防止用户进行重复操作或误操作。

使用 ElLoading.service 需要先在项目中引入 Element UI 框架，并在需要使用的组件或页面中进行注册。注册后，可以通过调用该服务的方法来显示或隐藏 Loading 指示器。

例如，在 Vue.js 中使用 ElLoading.service 可以这样写：

import { Loading } from 'element-ui';

// 注册服务
Vue.use(Loading.directive);

// 显示 Loading 指示器
const loadingInstance = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// 隐藏 Loading 指示器
loadingInstance.close();

其中，`lock` 表示是否锁定页面，防止用户进行其他操作；`text` 表示 Loading 指示器中显示的文本；`spinner` 表示 Loading 指示器中显示的图标；`background` 表示 Loading 指示器的背景颜色。

Vue自定义组件 父组件使用子组件的方法

在Vue中，父组件可以使用子组件的方法通过以下几种方式：

1. 使用`$refs`引用子组件：在父组件中，可以通过`ref`属性给子组件起一个名称，然后通过`$refs`访问子组件的实例，从而调用子组件的方法。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

2. 使用自定义事件：子组件可以通过`$emit`触发自定义事件，然后在父组件中通过`@`监听该事件，并执行相应的方法。例如：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <child-component @child-method="handleChildMethod"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$emit('call-child-method');
    },
    handleChildMethod() {
      // 处理子组件方法调用
    }
  }
}
</script>

请根据你的需求选择适合的方式来使用子组件的方法。