js 调用vue组件显示dialog框

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

下面是实现的步骤：

1. 创建全局的dialog组件

在Vue实例的components属性中注册一个全局的dialog组件，并在模板中显示需要展示的内容。

Vue.component('dialog', {
  props: {
    title: String,
    content: String
  },
  template: `
    <div class="dialog">
      <div class="dialog__header">{{title}}</div>
      <div class="dialog__content">{{content}}</div>
    </div>
  `
});

在上面的代码中，我们创建了一个名为dialog的组件，该组件接收两个props：title和content，分别表示dialog的标题和内容。在模板中，我们通过插值表达式将这两个props渲染到页面上。

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

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

function showDialog(title, content) {
  let dialogInstance = new Vue({
    el: document.createElement('div'),
    components: {
      'dialog': Vue.component('dialog')
    },
    template: '<dialog :title="title" :content="content"></dialog>',
    data: {
      title,
      content
    }
  });
  document.body.appendChild(dialogInstance.$el);
}

在上面的代码中，我们创建了一个名为showDialog的函数，用于显示dialog组件。该函数通过创建一个新的Vue实例来显示dialog组件，并将该实例的$el属性插入到DOM中。在模板中，我们通过绑定数据的方式将传入的title和content渲染到页面上。

3. 隐藏dialog组件

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

function hideDialog() {
  let dialogEl = document.querySelector('.dialog');
  if (dialogEl) {
    dialogEl.parentNode.removeChild(dialogEl);
  }
}

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

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