先来说一下弹出框的实现步骤
1. VUE 中弹出框的实现首先要在VUE中创建一个弹出框固定的模版
2. 在需要调用弹出框的地方
1.引入弹出框组件
2.给元素添加触发弹出框的事件
模版内容如下(创建方法同创建组件的方法相同)
html部分
js部分
在需要调用弹出框的页面中 引入弹出框组件 并且 添加显示弹出框的事件
组件公用的话 要在
<cpDialog>
<component :is='currentComponents'></component>
</cpDialog>
Dialog-content的样式宽度和高度用auto不要写死
默认弹出在中心位置的css书写
position: fixed;
top:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
最后在触发弹出框的按钮上添加 显示事件 就大功告成了。