js 调用vue组件显示loading框

要在JS中调用Vue组件并显示loading框，可以先创建一个全局的loading组件，然后在需要显示loading的地方调用该组件。

下面是实现的步骤：

1. 创建全局的loading组件

在Vue实例的components属性中注册一个全局的loading组件，并在模板中显示loading图标。

Vue.component('loading', {
  template: `
    <div class="loading">
      <i class="fa fa-spinner fa-spin"></i>
    </div>
  `
});

2. 在需要显示loading的地方调用该组件

在需要显示loading的地方，可以通过Vue实例的$mount方法创建一个新的Vue实例，并将loading组件作为选项传递给该实例的components属性。然后，将该实例的$el属性插入到DOM中，显示loading组件。

function showLoading() {
  let loadingInstance = new Vue({
    el: document.createElement('div'),
    components: {
      'loading': Vue.component('loading')
    },
    template: '<loading></loading>'
  });
  document.body.appendChild(loadingInstance.$el);
}

在上面的代码中，我们创建了一个名为showLoading的函数，用于显示loading组件。该函数通过创建一个新的Vue实例来显示loading组件，并将该实例的$el属性插入到DOM中。

3. 隐藏loading组件

在需要隐藏loading的地方，可以通过销毁loading实例来隐藏loading组件。

function hideLoading() {
  let loadingEl = document.querySelector('.loading');
  if (loadingEl) {
    loadingEl.parentNode.removeChild(loadingEl);
  }
}

在上面的代码中，我们创建了一个名为hideLoading的函数，用于隐藏loading组件。该函数通过查询DOM中是否存在loading元素，如果存在则删除该元素，从而隐藏loading组件。

综上所述，我们可以通过创建全局的loading组件，并在需要显示loading的地方调用该组件来显示loading框。同时，可以通过销毁loading实例来隐藏loading组件。