前言
在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件
涉及知识点: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 刚好搭配使用,这个也是弹窗组件命令式的关键。
3. $el
既然要添加dom元素,通过实例的$el属性,正好可以取到dom元素,之后就是使用原生方法进行添加节点啦~
代码实现
index.vue
{ {title}}
{
{cancelText}}
{
{confirmText}}
export default {
name:'',
data () {
return {
title:'这是一个弹窗',