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

2.第一步，新建一個.vue文件 定義一個彈框的基本模板

style樣式放在了文章的最底部，如果需要看效果，需要將樣式放入這個vue文件里，樣式是用less寫的，需要你的項(xiàng)目引入less

注意：我這里的組件右上角關(guān)閉是一張圖片 需要換成你自己本地的路徑

<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='http://m.b3g6.com/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> <!-- 默認(rèn)是沒有取消按鈕的，data定義默認(rèn)true false --> <button v-show='cancelBtn' @click='cancel'>取消</button> </div> </div> </div></template><script> export default { data() { return { show: true, // 通過這個屬性，控制是否移除dom元素 title:’’, // 頂部標(biāo)題 content:’’, // 內(nèi)容 cancelBtn: false // 取消按鈕 }; }, methods: { close() { // 右上角關(guān)閉 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 // 當(dāng)彈框出現(xiàn)的時候 點(diǎ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); // 返回一個“擴(kuò)展實(shí)例構(gòu)造器” let AlertModal = (o) => { let alertDom = new AlertConstructor({ el: document.createElement(’div’); //將Alert組件掛載到新創(chuàng)建的div上 }) document.body.appendChild(alertDom.$el); //把Alert組件的dom添加到body里 // 標(biāo)題 alertDom.title = o.title || ’信息’; // 單條內(nèi)容 alertDom.content = o.content; // 關(guān)閉按鈕 alertDom.cancelBtn = o.cancelBtn; // 彈框三個事件 右上角關(guān)閉 確定 取消 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.在任意組件調(diào)用

<template> <div> <button @click='operate'>點(diǎn)擊調(diào)用彈框</button> </div></template><script>export default { methods: { operate() { this.$alert({ title: ’信息’, content: ’登入成功！’, cancelBtn: true, //這個是啟用取消按鈕， close() { // 這里執(zhí)行點(diǎn)擊右上角需要做的事，默認(rèn)執(zhí)行關(guān)閉彈框 }, confirm() { // 這里執(zhí)行點(diǎn)擊確定按鈕需要做的事，默認(rèn)執(zhí)行關(guān)閉彈框 }, cancel() { // 這里執(zhí)行點(diǎn)擊取消按鈕需要做的事，默認(rèn)執(zhí)行關(guān)閉彈框 } }) } }}</script>

取消按鈕開啟

調(diào)用之后是往body添加元素

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

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

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

補(bǔ)充知識：Vue注冊全局組件-彈窗組件

在src目錄下新建components文件夾

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

<template> <transition name='fade'> <div :style='{zIndex}'> <div : :style='[innerWidth]'> <div v-if='title.trim()' : class='title g-font18'> {{title}} <span class='title-data'>{{titleData}}</span> </div> <div v-if='isCancel' class='v-cancel'> <div :@click='cancel'> &#xe656; </div> </div> <slot name='slot3'></slot> <div v-if='!hideCont' : class='content'> <slot></slot> </div> <slot name='slot2'></slot> </div> <div @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}, //是否顯示關(guān)閉按鈕 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 實(shí)現(xiàn)一個簡單的全局調(diào)用彈窗案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。