vue自定义弹出层、vue自定义弹出框、vue上下左右居中弹出框

可直接拿去用，如果需要两个按钮，需自己手动添加

css

/* 弹窗样式 */
.login {
  position: fixed;
  height: 100px;
  width: 240px;
  background: #ffffff;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  filter: alpha(opacity=20);
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #111111;
}
.popup_content{
    width: 90%;
    margin: auto;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
}
.close_popup_btn{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
}

 

html

<button @click="ShowPopup" style="width: 2rem;height: 0.6rem;line-height: 0.6rem;text-align: center;background: chartreuse;">自定义弹窗</button>
<div v-show="is_popup">
        <!--这里是要展示的内容层-->
        <div class="login">
            <p class="popup_content">这是提示内容</p>
            <div class="close_popup_btn" @click="close_popup_btn">确定</div>
        </div>
        <!--这里是半透明背景层-->
        <div class="over"></div>
</div>

js

data() {
        return {
             is_popup:false,
        }
},
methods: {
         ShowPopup(){
              this.is_popup=true
         },
         close_popup_btn(){
              this.is_popup=false
         },
},

效果图