- 先用js,新建一个div,并且赋值一个id
因为,我们组件的挂载,是要指定一个 容器id,这个div就是我们挂载的容器
然后在Elements里面找
找document里面有没有刚刚插入的节点
- 一般是在body的子节点的最后一个
- 因为我们用的是 appendChild 方法
- 这个就是我们刚刚动态插入的
接下来注册组件,然后挂载上去试试
Vue.prototype.$dialog = () => {
const id = 'custom-dialog'
const div = document.createElement('div')
div.id = id
document.body.appendChild(div)
// 注册组件
const DialogComponent = Vue.extend(Dialog)
// 实例化
const DialogInstant = new DialogComponent()
// 挂载
DialogInstant.$mount(`#${id}`)
}
把组件的内容换成element-ui的弹窗
然后写2个方法去控制visible这个变量
最后,把这个变量给弹窗绑定上去
把 APP.vue 那个调用删了
把这个调用放到一个按钮上面点击
就能实现,点击,打开弹窗了
放到某个点击事件里
你可以放在点击新增按钮的执行方法里面
点击新增按钮
调用这个方法去打开弹窗
写在调用那里
我们会发现:每点一次就会增加一个
所以,当我们操作很多次的时候,就会在document里添加很多个,
节点越多,我们页面的资源就会被占用
所以,我们要在弹窗关闭的时候,把弹窗销毁掉
el-dialog有这个事件
通常来说,我们组件里面调用this.$destroy就能销毁掉自身
接下来,给弹窗传入一个标题
这里调用的时候传入一个对象,里面有个title属性
那么应该去哪里接收这个对象
(方法,传参,接收参数)
就是在注册弹窗那里声明
注册那里就是声明方法
(方法不声明,是无法调用的)
const $dialog 是声明方法