Vue-UI库中通过js直接显示message等弹窗是怎么实现的

在我们使用ElementUI或者其他的一些UI库的时候,一些通知(Notification)、消息(Message)、弹框等一些组件我们都可以用全局的js方法直接调用。有时候我们可能需要设计一些样式功能独特的消息提示组件,那如何做到像组件库中可以通过js全局调用,而不需要在template中引入组件呢。

import MessageBox from './components/MessageBox.vue'
const MessageBoxConstructor = Vue.extend(MessageBox)
Vue.prototype.$myMessageBox = () => {
  const instant = new MessageBoxConstructor().$mount()
  document.body.appendChild(instant.$el)
}

// 调用
this.$myMessageBox()

xixi

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注