vue 實現(xiàn)一個簡單的全局調用彈窗案例

更新時間：2020年09月10日 10:24:43 作者：好巧.

這篇文章主要介紹了vue 實現(xiàn)一個簡單的全局調用彈窗案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1.實現(xiàn)效果圖

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) {
    // 通過監(jiān)控data里的show屬性 彈框有三個事件（右上角取消 確定按鈕 取消按鈕）
    // 每個事件寫了 this.show = false
    // 當彈框出現(xiàn)的時候 點擊任何一個事件 都會觸發(fā)這里的監(jiān)控事件 將頁面上的彈框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組件掛載到新創(chuàng)建的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() {
     // 這里執(zhí)行點擊右上角需要做的事，默認執(zhí)行關閉彈框
    },
    confirm() {
     // 這里執(zhí)行點擊確定按鈕需要做的事，默認執(zhí)行關閉彈框
    },
    cancel() {
     // 這里執(zhí)行點擊取消按鈕需要做的事，默認執(zhí)行關閉彈框
    }
   })
  }
 }
}
</script>

取消按鈕開啟

調用之后是往body添加元素

5.通過window.alertIsShow，給window增加一個屬性，來控制一個頁面只會出現(xiàn)一個彈框

methods: {
  operate () {
   if (!window.alertIsShow) {
    // 彈框模板有個 delete window.alertIsShow 是為了彈框關閉之后能再次顯示
    this.$alert({
     title: '信息',
     content: '登入成功！',
     cancelBtn: true,
     close () {
      // 這里執(zhí)行點擊右上角需要做的事，默認執(zhí)行關閉彈框
     },
     confirm () {
      // 這里執(zhí)行點擊確定按鈕需要做的事，默認執(zhí)行關閉彈框
     },
     cancel () {
      // 這里執(zhí)行點擊取消按鈕需要做的事，默認執(zhí)行關閉彈框
     }
    })
    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>

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

補充知識：Vue注冊全局組件-彈窗組件

在src目錄下新建components文件夾

1.新建module文件夾，然后新建v-alert.vue

<template>
 <transition name="fade">
  <div
    class="v-alert g-center"
    :style="{zIndex}">
   <div
     class="v-cont"
     :class="{shadow:!hideCont}"
     :style="[innerWidth]">
    <div
      v-if="title.trim()"
      :style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"
      class="title g-font18">
     {{title}}
     <span class="title-data">{{titleData}}</span>
    </div>
    <div
      v-if="isCancel"
      class="v-cancel">
     <div
       class="cancel-icon"
       :style="{color:cancelCol}"
       @click="cancel">
      &#xe656;
     </div>
    </div>
    <slot name="slot3"></slot>
    <div
      v-if="!hideCont"
      :style="styles"
      class="content">
     <slot></slot>
    </div>
    <slot name="slot2"></slot>
   </div>
   <div
     class="g-fixed alert-wrap"
     @click="$emit('cancel')"
     :style="{backgroundColor:bgWrapColor}"></div>
  </div>
 </transition>
</template>

<script>
 export default {
  name: "v-alert",
  props: {
   title: {default: ""},
   // titFontSize:{default: '16'},
   bgColorTit: {default: "#40404C"},
   bgColor: {default: "#fff"}, // 背景色
   bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //外套背景色
   cancelCol: {default: "#fff"}, //按鈕顏色
   width: {required: true, type: Number}, //寬度
   minWidth: {type: Number, default: 0},
   isCancel: {type: Boolean, default: true}, //是否顯示關閉按鈕
   titleData: {default: ""},
   hideCont: {type: Boolean, default: false}, //是否隱藏cont
   zIndex: {default: 2000},
   styles: {
    default() {
     return {};
    },
    type: Object
   },
   titleStyle: {
    default() {
     return {};
    },
    type: Object
   },
  },
  components: {},
  computed: {
   innerWidth() {
    let dfu = {
     backgroundColor: this.bgColor
    };
    this.minWidth > 0
     ? dfu.minWidth = `${this.minWidth}px`
     : dfu.width = `${this.width}px`;
    return dfu;
   }
  },
  methods: {
   cancel() {
    this.$emit("cancel");
   }
  },
  mounted() {
   document.addEventListener(
    "keydown",
    event => {
     let keyCode = this.$_lib.getKeycode(event);
     if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");
    },
    false
   );
  }
 };
</script>

<style lang="scss"
  rel="stylesheet/scss"
  scoped>
 .v-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  .alert-wrap {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*z-index: 2000;*/
  }
  .v-cont {
   min-width: 100px;
   min-height: 100px;
   background-color: #ffffff;
   position: relative;
   border-radius: 2px;
   .shadow {
    box-shadow: 0 2px 30px rgba(42, 47, 59, 0.2);
   }
   z-index: 2001;
   .title {
    width: 100%;
    line-height: 70px;
    color: #ffffff;
    padding-left: 30px;
   }
   .title-data {
    color: #f8e19a;
   }
   .content {
    padding: 40px;
    /*padding: 60px 40px 50px 40px;*/
    word-wrap: break-word;
    text-align: left;
   }
  }
 
  .v-cancel {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 70px;
  }
  .cancel-icon {
   position: absolute;
   text-align: center;
   width: 20px;
   height: 20px;
   line-height: 20px;
   right: 20px;
   top: 50%;
   margin-top: -10px;
   color: #ffffff;
   cursor: pointer;
   transition: 200ms;
   &:hover {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
   }
  }
 }
</style>

2.在nodule同級目錄新建vue-component.js

import VAlert from './v-alert'; //彈窗
 
export default {
 install(Vue) {
  Vue.component('VAlert', VAlert);
 }
};

3.在main.js中注冊為全局組件

import vueComponent from "./components/vue-component";

Vue.use(vueComponent);

4.在其他組件可以直接用了,無需import

<template>
  <v-alert
   v-if="is_alert"
   @cancel="is_alert=false"
   bg-color-tit="#40404C"
   cancel-col="#fff"
   :title="提示"
   :width="680">
   <div></div>
  </v-alert>
</template>

以上這篇vue 實現(xiàn)一個簡單的全局調用彈窗案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue寫一個全局彈窗組件通過js調用的方法

vue之計算屬性的緩存computed的用法解讀
這篇文章主要介紹了vue之計算屬性的緩存computed的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11
vscode中eslint配置保存自動修復代碼示例詳解
vscode根據(jù)eslint保存?動修復配置,下面這篇文章主要給大家介紹了關于vscode中eslint配置保存自動修復代碼的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-12-12
Vue獲取當前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當前日期的需求,有的是獲取到當前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當前時間是一項常見的需求,本文將深入探討Vue獲取當前系統(tǒng)日期(年月日),幫助您更好地利用當前時間,需要的朋友可以參考下
2024-01-01
vue配置啟動項目自動打開瀏覽器方式
這篇文章主要介紹了vue配置啟動項目自動打開瀏覽器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
el-select 的下拉框中新增倆自定義按鈕的操作方法
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細說明了設置`popper-append-to-body`屬性為false的重要性,以及如何通過修改樣式來實現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧
2024-11-11
Vue 綁定style和class樣式的寫法
class 與 style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術,如果需要動態(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧
2023-10-10
vue?指令版富文本溢出省略截取示例詳解
這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
vue-cli3項目打包后自動化部署到服務器的方法
這篇文章主要介紹了vue-cli3項目打包后自動化部署到服務器的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
Vue項目打包部署到GitHub Pages的實現(xiàn)步驟
本文主要介紹了Vue項目打包部署到GitHub Pages的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
vue操作動畫的記錄animate.css實例代碼
這篇文章主要介紹了vue操作動畫的記錄animate.css的相關知識，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04