自己写一个简单的弹窗页面

最终效果

自己写一个简单的弹窗页面

我使用的vue的js做绑定处理。虽然现在各种弹窗插件到处都是，但是本着造*的本心还是写了一点。这段内容是17年的时候写的。时间跨度稍微有点大。表在意了。

基本思路：

1：为需要添加遮罩的页面添加一个组件，这个组件绑定在isShow参数上，

2：写这个组件，此组件为遮罩背景，在这个组件上再添加一个组件，绑定在curtainName上使得组件内容可以随名称变更改变。之后再写一个新的组件，此组件为遮罩上层弹出，在这个组件上面写出新的弹出页面内容（当然，如果不公用的话，那么直接写在遮罩里面也是可以的，没必要在写一个）

3：为各个页面添加点击事件，更改isShow和curtainName的属性，显示出遮罩和弹出界面

代码

1 将要被遮罩的页面添加遮罩

showBtn:function () {
curtainObject.isShow = true;
curtainObject.contentName = "edit";
}

2遮罩页面（遮罩弹窗的css撑满屏幕）

<template>
   <div id="curtain" class="curtain">
      <component v-bind:is="contentName" transition="bounce" transition-mode="out-in">
      </component>
   </div>
</template>
<script>
import edit from "./Edit.vue"
export default {
data() {
   return curtainObject;
},
methods: {

},
components:{
  "edit":edit
}

};
</script>
<style>

.curtain {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, 0.8);

z-index: 1000;
transition: all .3s ease-in-out;
}
</style>

3：弹出界面

<template class="div-middle">
<div>
<div class="editTitle">
<label>修改</label>
</div>
</div>
</template>

<script>
export default {
data() {
  return curtainObject;
},
methods: {
cancelBtn: function () {
   curtainObject.isShow = false;
},
editAccountSaveBtn: function () {

   }
},
}
</script>

<style>

</style>

自己写一个简单的弹窗页面

相关推荐