用vue實現模態框組件

来源:http://www.cnblogs.com/hefty/archive/2016/12/19/6196314.html
-Advertisement-
Play Games

基本上每個項目都需要用到模態框組件,由於在最近的項目中,alert組件和confirm是兩套完全不一樣的設計,所以我將他們分成了兩個組件,本文主要討論的是confirm組件的實現。 ...


基本上每個項目都需要用到模態框組件,由於在最近的項目中,alert組件和confirm是兩套完全不一樣的設計,所以我將他們分成了兩個組件,本文主要討論的是confirm組件的實現。

組件結構

<template>
    <div class="modal" v-show="show" transition="fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--頭部-->
                <div class="modal-header">
                    <slot name="header">
                        <p class="title">{{modal.title}}</p>
                    </slot>
                    <a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
                </div>
                <!--內容區域-->
                <div class="modal-body">
                    <slot name="body">
                        <p class="notice">{{modal.text}}</p>
                    </slot>
                </div>
                <!--尾部,操作按鈕-->
                <div class="modal-footer">
                    <slot name="button">
                        <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
                        <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
                    </slot>
                </div>
            </div>
        </div>
    </div>
    <div v-show="show" class="modal-backup" transition="fade"></div>
</template>  

模態框結構分為三部分,分別為頭部、內部區域和操作區域,都提供了slot,可以根據需要定製。

樣式

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    overflow: scroll;
    margin: 30/@rate auto;
}
.modal-dialog {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
    width: 690/@rate;
    padding: 50/@rate 40/@rate;
    background: #fff;
}
.modal-backup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
}

這裡只是一些基本樣式,沒什麼好說的,這次項目是在移動端,用了淘寶的自適應佈局方案,@rate是切稿時候的轉換率。

介面定義

/**
 * modal 模態介面參數
 * @param {string} modal.title 模態框標題
 * @param {string} modal.text 模態框內容
 * @param {boolean} modal.showCancelButton 是否顯示取消按鈕
 * @param {string} modal.cancelButtonClass 取消按鈕樣式
 * @param {string} modal.cancelButtonText 取消按鈕文字
 * @param {string} modal.showConfirmButton 是否顯示確定按鈕
 * @param {string} modal.confirmButtonClass 確定按鈕樣式
 * @param {string} modal.confirmButtonText 確定按鈕標文字
 */
props: ['modalOptions'],
computed: {
    /**
     * 格式化props進來的參數,對參數賦予預設值
     */
    modal: {
        get() {
            let modal = this.modalOptions;
            modal = {
                title: modal.title || '提示',
                text: modal.text,
                showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
                cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
                cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
                showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
                confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
                confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '確定',
            };
            return modal;
        },
    },
},

這裡定義了介面的參數,可以自定義標題、內容、是否顯示按鈕和按鈕的樣式,用一個computed來做參數預設值的控制。

模態框內部方法

data() {
    return {
        show: false,   // 是否顯示模態框
        resolve: '',
        reject: '',
        promise: '',  // 保存promise對象
    };
},
methods: {
    /**
     * 確定,將promise斷定為完成態
     */
    submit() {
        this.resolve('submit');
    },
    /**
     * 關閉,將promise斷定為reject狀態
     * @param type {number} 關閉的方式 0表示關閉按鈕關閉,1表示取消按鈕關閉
     */
    close(type) {
        this.show = false;
        this.reject(type);
    },
    /**
     * 顯示confirm彈出,並創建promise對象
     * @returns {Promise}
     */
    confirm() {
        this.show = true;
        this.promise = new Promise((resolve, reject) => {
            this.resolve = resolve;
            this.reject = reject;
        });
        return this.promise;   //返回promise對象,給父級組件調用
    },
},

在模態框內部定義了三個方法,最核心部分confirm方法,這是一個定義在模態框內部,但是是給使用模態框的父級組件調用的方法,該方法返回的是一個promise對象,並將resolve和reject存放於modal組件的data中,點擊取消按鈕時,斷定為reject狀態,並將模態框關閉掉,點確定按鈕時,斷定為resolve狀態,模態框沒有關閉,由調用modal組件的父級組件的回調處理完成後手動控制關閉模態框。

調用

<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
this.$refs.dialog.confirm().then(() => {
    // 點擊確定按鈕的回調處理
    callback();
    this.$refs.dialog.show = false; 
}).catch(() => {
    // 點擊取消按鈕的回調處理
    callback();
});

v-ref創建一個索引,就很方便拿到模態框組件內部的方法了。這樣一個模態框組件就完成了。

其他實現方法

在模態框組件中,比較難實現的應該是點擊確定和取消按鈕時,父級的回調處理,我在做這個組件時,也參考了一些其實實現方案。

使用事件轉發

這個方法是我的同事實現的,用在上一個項目,採用的是$dispatch和$broadcast來派發或廣播事件。

首先在根組件接收dispatch過來的transmit事件,再將transmit事件傳遞過來的eventName廣播下去

events: {
    /**
     * 轉發事件
     * @param  {string} eventName 事件名稱
     * @param  {object} arg       事件參數
     * @return {null}
     */
    'transmit': function (eventName, arg) {
        this.$broadcast(eventName, arg);
    }
},

其次是模態框組件內部接收從父級組件傳遞過來的確定和取消按鈕所觸發的事件名,點擊取消和確定按鈕的時候觸發

// 接收事件,獲得需要取消和確定按鈕的事件名
events: {
    'tip': function(obj) {
        this.events = {
            cancel: obj.events.cancel,
            confirm: obj.events.confirm
        }
    }
}
// 取消按鈕
cancel:function() {
    this.$dispatch('transmit',this.events.cancel);
}
// 確定按鈕
submit: function() {
    this.$dispatch('transmit',this.events.submit);
}

在父級組件中調用模態框如下:

this.$dispatch('transmit','tip',{
    events: {
        confirm: 'confirmEvent'
    }
});
this.$once('confirmEvent',function() {
    callback();
}

先是傳遞tip事件,將事件名傳遞給模態框,再用$once監聽確定或取消按鈕所觸發的事件,事件觸發後進行回調。

這種方法看起來是不是很暈?所以vue 2.0取消了$dispatch和$broadcast,我們在最近的項目中雖然還在用1.0,但是也不再用$dispatch和$broadcast,方便以後的升級。

使用emit來觸發

這種方法來自vue-bootstrap-modal,點擊取消和確定按鈕的時候分別emit一個事件,直接在組件上監聽這個事件,這種做法的好處是事件比較容易追蹤。

// 確定按鈕
ok () {
    this.$emit('ok');
    if (this.closeWhenOK) {
        this.show = false;
    }
},
// 取消按鈕
cancel () {
    this.$emit('cancel');
    this.show = false;
},

調用:

<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
    Modal Text
</modal>

但是我們在使用的時候經常會遇到這樣的場景,在一個組件的內部,經常會用到多個對話框,對話框可能只是文字有點區別,回調不同,這時就需要在template中為每個對話框都寫一次,有點麻煩。

參考資料

照例放張公眾號的二維碼,歡迎關註哈:





您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.假設我們要輸出張三,李四兩個人的基本信息,包括姓名,年齡,可以用以下的C程式實現: eg: 2.假設要輸出很多人的信息,那麼用上面這樣的程式思路實現起來很不方便,可以用數組來實現: eg: 3.假設基本信息的屬性有很多個,還有工作,婚姻狀況等等的屬性,按上面的程式思想,我們就得增加很多用於保存屬 ...
  • 微盤系統,微盤搭建,微盤源碼,微交易系統搭建,微交易源碼,微交易系統, 本公司微交易系統,是基於微信端開發的交易平臺。平臺適用於貴金屬、外匯、原油、期貨…等多個交易品種的投資者,並對接多個移動支付介面,輕鬆解決出入金問題。程式說明:2017新版微交易系統建設,採用新浪數據介面,非常穩定,直接運營版本 ...
  • 閱讀目錄 架構的定義 如何開始設計一個架構 一個好架構的特點 做架構中的誤區 結語 一、架構的定義 所謂一千個架構師中有一千種“最好的架構”模式。 “架構”是我們這行業種一個很常見的詞,表明其必然也是經歷了很長的歲月打磨所形成的一個詞。架構的這個詞出現的意義是什麼?為瞭解決什麼問題?只有把這2個問題 ...
  • 引子 前幾天看到微信後臺團隊分享了TLS相關文章,正好gRPC里TLS數據加密是很重要的一塊,於是整理出了這篇文章。 在gRPC里,如果僅僅是用來做後端微服務,可以考慮不加密。本文太長,先給個大綱。 1. HTTPS,HTTP/2介紹 2. TLS加密原理、實現庫 3. HTTP/2協議協商機制 4 ...
  • 一、Angular特點: 1、雙向數據綁定,主打賣點 2、MVVM 模型,把視圖和邏輯分開 3、依賴註入 個人感覺,在Angular中,視圖對應 HTML 模板,視圖邏輯對應directive 和 controller。 二、模塊 Angular 中通過模塊來管理命名空間,可以通過不同的模塊來隔離不 ...
  • 本文轉載自 http://www.mynawang.com/ 相關代碼可訪問 https://github.com/mynawang/Design-Pattern-Learning 什麼是設計模式 設計模式(Design pattern)是一套被反覆使用、多數人知曉的、經過分類編目的、代碼設計經驗的 ...
  • <html> ...
  • 簡介 "transformjs" 在非react領域用得風生水起,那麼react技術棧的同學能用上嗎?答案是可以的。junexie童鞋已經造了個 "react版本" 。 動畫實現方式 傳統 web 動畫的兩種方式 : 1. 純粹的CSS3 :如:transition/animation+transf ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...