兩種方式lu一個vue彈窗元件(v-model與promise方式)

nodaysoff發表於2019-03-04
Vue元件Promise

最近公司有一個後臺業務雖然也是寫在了現有的後臺系統中，但是之後要為這個業務單獨拉出來新建一個後臺系統,所以現有的後臺系統中的vue元件庫，就不能用了(因為不知道將來的系統要基於什麼元件庫，以防給未來移植專案帶來麻煩),這次業務中又遇到了彈窗的功能,所以只能手動寫一個了(雖然說彈窗元件很簡單，也是想自己總結一下，有不對的地方也請指出)，一開始用傳統的props,$emit但是覺得要接兩個取消與確認的回撥這塊的邏輯分散了所以就用了promise兩個回撥的方式把兩個回撥寫在了一起,並不一定好，算是提供一種思路吧。

一.概覽

先看最後的呼叫方式

props $emit方式
<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="確認" title="彈窗標題" small @on-ok="onOK" @on-cancel="onCancel">
    <div>slot的東西,想向彈窗中新增自定義的內容</div>
</chat-modal>

methods: {
    display() {
      this.showModal = true;//互動點選手動觸發顯示彈窗  
    },
    onOK() {},//點選確認的回撥
    onCancel() {}//點選取消的回撥
}

promise的回撥方式
<chat-modal ref="chat-modal"></chat-modal>

methods: {
    display() {
        this.$refs["chat-modal"].openModal({
            title: "彈窗標題",
            sureText: "確認",
            cancelText: "取消"
        }).then(res => {
            //點選確認的回撥
        }, res => {
            //點選取消的回撥
        })
    }
}
複製程式碼

第二種方式的好處就是把所有的邏輯都集中到了一個方法裡。

二.看下元件的原始碼

tip: 樣式有些爛…

<template>
    <div>
        <div class="shadow" v-show="showModal"></div>
        <div class="modal" :class="{`smSize`: otherText.small || small}" v-show="showModal">
            <div class="header">{{ otherText.title || title}}</div>
            <div class="body">
                <slot></slot>
            </div>
            <div class="footer">
                <div class="item success" id="sure" ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</div>
                <div class="item red" id="cancel" ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</div>
            </div>
        </div>
    </div>
</template>

<script>
//此元件提供兩種呼叫方法,可以在元件上v-model一個表示是否顯示彈窗的對話方塊，然後需要的一些值通過props傳入，然後$emit在元件上@監聽做回撥
//第二中方法所有的傳值回撥都只需要在元件內部的一個方法呼叫然後在元件外部this.$refs[xxx].open呼叫然後.then觸發回撥，比上一種方便些
var initOtherText = {
    sureText: "",
    cancelText: "",
    title: "",
    small: false
};

export default {
    props: {
        title: {
            type: String
        },
        sureText: {
            type: String
        },
        cancelText: {
            type: String
        },
        value: {
            type: Boolean
        },
        small: {
            type: Boolean
        }
    },
    watch: {
        value(newVal) {
            this.showModal = newVal;
        }
    },
    data() {
        return {
            otherText: JSON.parse(JSON.stringify(initOtherText)),
            showModal: this.value
        };
    },
    methods: {
        makeSure() {
            this.$emit("on-ok");
            this.$emit("input", false);
        },
        makeCancel() {
            this.$emit("on-cancel");
            this.$emit("input", false);
        },
        openModal(otherText) {
            this.otherText = { ...otherText };
            this.showModal = true;
            var pms = new Promise((resolve, reject) => {
                this.$refs["sure"].addEventListener("click", () => {
                    this.showModal = false;
                    resolve("點選了確定");
                });
                this.$refs["cancel"].addEventListener("click", () => {
                    this.showModal = false;
                    reject("點選了取消");
                });
            });
            return pms;
        }
    }
};
</script>

<style lang="scss" scoped>
.shadow {
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.3s ease;
    width: 100%;
    z-index: 50;
}
.modal {
    display: table-cell;
    vertical-align: middle;
    overflow-x: hidden;
    position: fixed;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px;
    border-radius: 5px;
    outline: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
}

.header {
    align-items: center;
    background-color: #62a39e;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    color: #fff;
    font-weight: bold;
    display: -ms-flexbox;
    display: flex;
    height: 3.5rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}

.body {
    align-items: center;
    padding: 1.5rem;
}

.footer {
    justify-content: flex-end;
    padding: 1.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    float: right;
}

.item {
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    display: inline-block;
}
.info {
    background-color: #2196f3;
}
.success {
    background-color: #62a39e;
}
.red {
    background-color: #e95358;
}

.smSize {
    height: 200px;
}
</style>
複製程式碼

首先分析一下第一種方式:
呼叫者需要在元件外部v-model上繫結一個變數(例中為showModal)來指示彈窗是否顯示,顯示的時候需要在元件外部手動設定this.showModal = true,元件內部props定義一個屬性來接這個值為value: {type: Boolean},同時在元件內部在用宣告一個變數用來同步外部傳進來的props值預設值為 showModal: this.value(內部宣告的值也叫了showModal)，在watch中監聽進行同步
watch: { value(newVal) { this.showModal = newVal } };然後把元件內部的這個showModal值繫結在需要顯示或者隱藏的DOM元素上。向外丟擲事件的時候是在點選元件內部的確定與關閉按鈕時候

makeSure() {
            this.$emit("on-ok");
            this.$emit("input", false);
        },
makeCancel() {
            this.$emit("on-cancel");
            this.$emit("input", false);
        }
複製程式碼

this.$emit("on-ok");this.$emit("on-cancel");
這兩句的是向外丟擲事件在元件外部@接一下然後寫自己需要的回撥函式。這時就可以實現彈窗的顯示與隱藏了，你可能發現並沒有一句程式碼去設定this.showModal = false;彈窗就隱藏了。主要是因為這幾句程式碼 v-model = `showModal`和 元件內部的
props: {value: {type: Boolean}} this.$emit("input", false) 。v-model其實是vue的語法糖,
<chat-modal v-model="showModal">其實可以寫為 <chat-modal :value="showModal" @input="showModal = arguments[0]">所以要求我們在元件內部必須規定props的名字必須為value,
然後在元件內部觸發確定或者取消的時候在元件內部觸發this.$emit("input", false)這樣實現了直接隱藏彈窗而不必打擾使用者讓使用者在元件外部在手動將showModal置為false.

然後來看promise的方式：
第一種方式傳進來的值都通過props來接的，這種方式通過在元件內部定義了另一個物件來接傳進來的值,

var initOtherText = {
    sureText: "",
    cancelText: "",
    title: "",
    small: false
};
otherText: JSON.parse(JSON.stringify(initOtherText)),
複製程式碼

然後在menthods裡定義了一個名為openModal的方法,然後把傳進來的一系列引數賦值給元件內部的物件
this.otherText = { ...otherText }; this.showModal = true;並且將showModal置為true,然後每次觸發的時候新建一個promise物件，裡面的非同步事件為點選確定和取消的兩個點選事件,這裡要操作DOM了

this.$refs["sure"].addEventListener("click", () => {
    this.showModal = false;
    resolve("點選了確定");
});
複製程式碼

獲取確定按鈕的DOM元素繫結點選事件，回撥裡將showModal置為false並且resolve,

this.$refs["cancel"].addEventListener("click", () => {
    this.showModal = false;
    reject("點選了取消");
});
複製程式碼

獲取取消按鈕的DOM繫結點選事件，回撥裡reject.

遇到的坑

這之前遇到了一個坑，因為第一次已經繫結了點選事件，第二次resolve和reject就會失敗，本想取消一下繫結事件，但是因為將整個彈窗v-show=”showModal”的原因整個DOM被display:none;了就不需要手動解綁了。
第二個是關於用v-if還是v-show來隱藏彈窗,一開始用的是v-if但是發現在這步時

this.showModal = true;
var pms = new Promise((resolve, reject) => {
    this.$refs["sure"].addEventListener.xxx//省略
});
return pms;
複製程式碼

將showModal置為true時然後就去繫結事件這時候還沒有DOM還沒有解析玩DOM樹上還沒有,要不就得用this.$nextTick增加了複雜度，最後採用了v-show；

關於優先順序問題

如果既在元件上用prop傳了值(title,sureText之類的)如
<chat-modal" title="xx" sureText="xxx"></chat-modal>
也在方法裡傳了

this.$refs["chat-modal"].openModal({
    title: "服務小結",
    sureText: "提交併結束",
    cancelText: "取消"
    }).then();
複製程式碼

是以方法的優先順序為高，在元件內部DOM元素上通過||設定了優先順序，比如
<div class="header popModal">{{ otherText.title || title}}</div>
有方法的值取方法的值，沒有取props得值。

有不好或者不對的地方歡迎指正

相關文章