VUE弹出框书写

先来说一下弹出框的实现步骤

1. VUE 中弹出框的实现首先要在VUE中创建一个弹出框固定的模版

2. 在需要调用弹出框的地方 

      1.引入弹出框组件

      2.给元素添加触发弹出框的事件



模版内容如下(创建方法同创建组件的方法相同)

html部分

VUE弹出框书写

js部分

VUE弹出框书写

在需要调用弹出框的页面中  引入弹出框组件 并且 添加显示弹出框的事件


VUE弹出框书写

组件公用的话 要在

<cpDialog>

<component :is='currentComponents'></component>

</cpDialog>


Dialog-content的样式宽度和高度用auto不要写死

默认弹出在中心位置的css书写

position: fixed;

top:50%;

left:50%;

transform: translate3d(-50%,-50%,0);



最后在触发弹出框的按钮上添加 显示事件 就大功告成了。

VUE弹出框书写














上一篇:canvas粒子动画(vue)


下一篇:VUE的ajax拦截器