vue 實現一個簡單的全局調用彈窗

1.實現效果圖
在這裏插入圖片描述
2.第一步,新建一個.vue文件 定義一個彈框的基本模板

 style樣式放在了文章的最底部,如果需要看效果,需要將樣式放入這個vue文件裏
 ,樣式是用less寫的,需要你的項目引入less
 注意:我這裏的組件右上角關閉是一張圖片 需要換成你自己本地的路徑
<template>
  <div id="tip_alertModal">
    <div class="t-alert-mask"></div>
    <div class="t-alert-container">
      <div class="t-alert-title">
        <span>
          {{title}}
        </span>
        <img @click="close" src="../../../static/images/alert/guanbi.png" alt="">
      </div>
      <div class="t-alert-content">
        <span class="content-text">
          {{content}}
        </span>
      </div>
      <div class="t-alert-confirm">
        <button @click="confirm">確定</button>
        <!-- 默認是沒有取消按鈕的,data定義默認true false -->
        <button class="cancel-btn" v-show="cancelBtn" @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true, // 通過這個屬性,控制是否移除dom元素
        title:'', // 頂部標題
        content:'', // 內容
        cancelBtn: false // 取消按鈕
      };
    },
    methods: {
      close() {
        // 右上角關閉
        this.a_close && this.a_close();
        this.show = false;
        // 刪除判斷增加的window屬性
        delete window.alertIsShow;
      },
      confirm() {
        // 確定
        this.a_confirm && this.a_confirm();
        this.show = false;
        // 刪除判斷增加的window屬性
        delete window.alertIsShow;
      },
      cancel() {
        // 取消
        this.a_cancel && this.a_cancel();
        this.show = false;
        // 刪除判斷增加的window屬性
        delete window.alertIsShow;
      }
    },
    watch: {
      show(cur, old) {
      	// 通過監控data裏的show屬性  彈框有三個事件(右上角取消  確定按鈕  取消按鈕)
      	// 每個事件寫了 this.show = false
      	// 當彈框出現的時候 點擊任何一個事件  都會觸發這裏的監控事件  將頁面上的彈框Dom移除
        if (cur === false) {
          let tip_alert = document.getElementById('tip_alertModal');
          tip_alert.parentNode.removeChild(tip_alert);
        }
      }
    }
  }
</script>

3.定義一個js文件

import Vue from 'vue'; 
import Alert from '@/components/public/alertModal'; //引入剛纔寫的彈框組件 
let AlertConstructor = Vue.extend(Alert); // 返回一個“擴展實例構造器” 

let AlertModal = (o) => {
  let alertDom = new AlertConstructor({
    el: document.createElement('div'); //將Alert組件掛載到新創建的div上 
  })
  document.body.appendChild(alertDom.$el); //把Alert組件的dom添加到body裏 
	
  // 標題
  alertDom.title = o.title || '信息';
  // 單條內容
  alertDom.content = o.content;
  // 關閉按鈕
  alertDom.cancelBtn = o.cancelBtn;

  // 彈框三個事件 右上角關閉 確定 取消
  alertDom.a_close = o.close || null;
  alertDom.a_confirm = o.confirm || null;
  alertDom.a_cancel = o.cancel || null;

}
export default AlertModal;

4.mian.js

import alert from '@/common/alertModal' //這裏引入的是js文件 
Vue.prototype.$alert = alert;  

5.在任意組件調用

<template>
  <div>
    <button @click="operate">點擊調用彈框</button>
  </div>
</template>

<script>
export default {
  methods: {
    operate() {
      this.$alert({
        title: '信息',
        content: '登入成功!',
        cancelBtn: true, //這個是啓用取消按鈕,
        close() {
          // 這裏執行點擊右上角需要做的事,默認執行關閉彈框
        },
        confirm() {
          // 這裏執行點擊確定按鈕需要做的事,默認執行關閉彈框
        },
        cancel() {
          // 這裏執行點擊取消按鈕需要做的事,默認執行關閉彈框
        }
      })
    }
  }
}
</script>

取消按鈕開啓
在這裏插入圖片描述
調用之後是往body添加元素
在這裏插入圖片描述
5.通過window.alertIsShow,給window增加一個屬性,來控制一個頁面只會出現一個彈框

methods: {
    operate () {
      if (!window.alertIsShow) {
        // 彈框模板有個 delete window.alertIsShow 是爲了彈框關閉之後能再次顯示
        this.$alert({
          title: '信息',
          content: '登入成功!',
          cancelBtn: true,
          close () {
            // 這裏執行點擊右上角需要做的事,默認執行關閉彈框
          },
          confirm () {
            // 這裏執行點擊確定按鈕需要做的事,默認執行關閉彈框
          },
          cancel () {
            // 這裏執行點擊取消按鈕需要做的事,默認執行關閉彈框
          }
        })
        window.alertIsShow = true;
      }
    }
  }

6.最後是彈框組件的less樣式

<style lang="less" scoped>
  #tip_alertModal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    
    .t-alert-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .3);
    }

    .t-alert-container {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 240px;
      max-width: 400px;
      height: auto;
      background-color: #fff;
      transform: translate(-50%, -50%);
      border-radius: 4px;

      .t-alert-title {
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: rgba(115, 134, 255, 1);
        border-radius: 4px 4px 0px 0px;

        span {
          position: absolute;
          top: 50%;
          left: 10px;
          font-weight: 500;
          font-size: 16px;
          color: #fff;
          transform: translate(0, -50%);
        }

        img {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -50%);
          cursor: pointer;
        }
      }

      .t-alert-content {
        text-align: center;
        span {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: rgba(51,51,51,1);
        }

        span.content-text {
          display: inline-block;
          width: 100%;
          height: auto;
          font-weight: 400;
          font-size: 14px;
          color: #333;
          padding: 20px 18px;
        }
        .t-content-list {
            min-width: 320px;
            height: auto;
            text-align: left;
          .list-title {
            position: relative;
            padding: 10px 0 10px 10px;
            img {
              display: inline-block;
              position: absolute;
              width: 20px;
              margin-right: 10px;
            }
            span {
              display: inline-block;
              vertical-align: middle;
              padding-left: 31px;
            }
          }
          .list-content {
            width: 100%;
            height: auto;
            ul {
              padding-bottom: 10px;
              li {
                width: 100%;
                height: auto;
                padding-bottom: 10px;
                span {
                  vertical-align: top;
                } 
                span.title {
                  display: inline-block;
                  padding-left: 41px;
                  padding-right: 3px;
                  text-align: left;
                }
              }
            }
          }
        }
      }

      .t-alert-confirm {
        width: 100%;
        padding-bottom: 17px;
        text-align: center;

        button {
          display: inline-block;
          width: 80px;
          height: 36px;
          border: none;
          background: rgba(115, 134, 255, 1);
          font-weight: 400;
          font-size: 16px;
          color: #fff;
          border-radius: 4px;
          outline: none;
          cursor: pointer;
        }
        .cancel-btn {
          margin-left:20px;
          background:rgba(151,193,234,1);
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: rgba(255,255,255,1);    
        }
      }
    }
  }
</style>

如果本篇文章對你有幫助的話,很高興能夠幫助上你。

當然,如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方,希望你在看到之後能夠在評論裏指出來,我會在看到之後儘快的回覆你。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章