文章詳情頁

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

瀏覽：10日期：2022-11-24 14:52:58

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='http://www.gepszalag.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>  <button 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>

取消按鈕開啟

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

調用之后是往body添加元素

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

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樣式

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

補充知識：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'>  </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>

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

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

Vue

上一條：vue中jsonp插件的使用方法示例下一條：vue v-for 點擊當前行,獲取當前行數(shù)據(jù)及event當前事件對象的操作

相關文章：

1. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案2. jsp實現(xiàn)局部刷新頁面、異步加載頁面的方法3. xml文件的結構解讀第1/2頁4. Jsp中request的3個基礎實踐5. python GUI庫圖形界面開發(fā)之PyQt5工具欄控件QToolBar的詳細使用方法與實例6. 使用python修改文件并立即寫回到原始位置操作(inplace讀寫)7. python GUI庫圖形界面開發(fā)之PyQt5計數(shù)器控件QSpinBox詳細使用方法與實例8. Python填充任意顏色,不同算法時間差異分析說明9. Java map.getOrDefault()方法的用法詳解10. 什么是python的id函數(shù)

排行榜

					
					低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案
xml文件的結構解讀第1/2頁
jsp實現(xiàn)局部刷新頁面、異步加載頁面的方法
Jsp中request的3個基礎實踐
基于JavaScript獲取url參數(shù)2種方法
在idea 中添加和刪除模塊Module操作
IDEA編寫JavaWeb出現(xiàn)亂碼問題解決方案
Vue狀態(tài)模式實現(xiàn)窗口停靠功能(靈動、自由, 管理后臺Admin界面)
Java 抽象類與接口的對比
python GUI庫圖形界面開發(fā)之PyQt5工具欄控件QToolBar的詳細使用方法與實例
python GUI庫圖形界面開發(fā)之PyQt5計數(shù)器控件QSpinBox詳細使用方法與實例
				