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
         },
},

效果圖