Vue如何编写一个命令式弹窗组件，变成：Vue如何实现一个命令式弹窗组件？

本文共计923个文字，预计阅读时间需要4分钟。

前言：在日常工作中，弹窗组件是非常常用的组件。但使用过多还是别人的，空闲时间自己简单实现一个弹窗组件，包括以下知识点：extend、$mount、$el，使用方式：this.$Confirm({ title: '自定义' })

前言

在日常工作中弹窗组件是很常用的组件，但用得多还是别人的，空闲时间就自己来简单实现一个弹窗组件

涉及知识点：extend、$mount、$el

使用方式：

this.$Confirm({ title:'自定义标题' }).then(res=>{ console.log(res) })

目录结构

index.vue：组件布局、样式、交互逻辑

index.js：挂载组件、暴露方法

知识点

在此之前，了解下涉及的知识点

1. extend

使用这个api，可以将引入的vue组件变成vue构造函数，实例化后方便进行扩展

2. $mount

我们希望弹窗组件是在使用时才显示出来，那么就需要动态的向body中添加元素。使用$mount方法可以手动挂载一个vue实例，和 extend 刚好搭配使用，这个也是弹窗组件命令式的关键。