開發(fā)一個簡單的 Vue 彈窗組件

hiyang 發(fā)布于2019-08-23 18:06 / 3460人閱讀

摘要：取消確認(rèn)現(xiàn)在彈窗組件的結(jié)構(gòu)已經(jīng)搭建出來了。另外還有兩個方法，分別是點擊取消和確認(rèn)的回調(diào)函數(shù)，它們的作用是觸發(fā)對應(yīng)的事件。到這里，一個簡單的彈窗組件已經(jīng)完成了樣式后面再說。一個彈窗組件的拖拽一般通過三個事件來控制，分別是。

更多文章

一個彈窗組件通常包含兩個部分，分別是遮罩層和內(nèi)容層。

遮罩層是背景層，一般是半透明或不透明的黑色。

內(nèi)容層是放我們要展示的內(nèi)容的容器。

現(xiàn)在彈窗組件的結(jié)構(gòu)已經(jīng)搭建出來了。

類 modal-bg: 遮罩層

類 modal-container: 內(nèi)容層容器

類 modal-header: 內(nèi)容層頭部

類 modal-main: 內(nèi)容層主體部分（用來展示內(nèi)容）

類 modal-footer: 內(nèi)容層腳部

屬性 v-show: 控制彈窗的展示與關(guān)閉

屬性 title: 標(biāo)題

方法 hideModal: 點擊取消的回調(diào)函數(shù)

方法 submit: 點擊確認(rèn)的回調(diào)函數(shù)

插槽 slot: 用來展示內(nèi)容

定義完 HTML 結(jié)構(gòu)，還得定義組件的 props 屬性，用來接收父組件的傳參，以方便在父組件通過屬性來控制彈窗。

export default {
    name: "modal",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
    },
    methods: {
        hideModal() {
            this.$emit("hideModal")
        },

        submit() {
            this.$emit("submit")
        },
    }
}

從上述代碼可知，組件只有兩個 prop 屬性，分別是 show（控制彈窗展示與關(guān)閉）和 title（彈窗標(biāo)題）。
另外還有兩個方法，分別是點擊取消和確認(rèn)的回調(diào)函數(shù)，它們的作用是觸發(fā)對應(yīng)的事件。
到這里，一個簡單的彈窗組件已經(jīng)完成了（樣式后面再說）。

如何調(diào)用

一個組件寫完了，要怎么調(diào)用呢？

假設(shè)這個組件的文件名為 Modal.vue，我們在父組件里這樣調(diào)用（假設(shè)父組件和彈窗組件在同一文件夾下）。


    這里放彈窗的內(nèi)容

import Modal from "./Modal.vue"
export default {
    data() {
      return {
        title: "彈窗標(biāo)題",
        show: true,
      }
    },
    components: {
        Modal
    },
    methods: {
        hideModal() {
            // 取消彈窗回調(diào)
            this.show = false
        },

        submit() {
            // 確認(rèn)彈窗回調(diào)
            this.show = false
        }
    }
}

把子組件要求的兩個屬性和兩個方法都寫上，現(xiàn)在來看看這個彈窗的效果。

一個簡單的彈窗組件就這樣完成了。

改進(jìn) 樣式

現(xiàn)在市面上的 UI 庫特別多，所以一些通用的組件樣式不建議自己寫，直接用現(xiàn)成的就好。在這個組件上，我們可以使用 element-ui，改造后變成這樣。

嗯... 看起來只有兩個按鈕變化了，不過沒關(guān)系，后面的內(nèi)容部分肯定還有用得上的時候。

功能

看起來這個簡單的彈窗組件真的是非常簡單，我們可以在此基礎(chǔ)上適當(dāng)?shù)脑黾右恍┕δ?，例如：拖拽?/p>

一個彈窗組件的拖拽一般通過三個事件來控制，分別是 mousedown、mousemove、mouseup。

mousedown 用來獲取鼠標(biāo)點擊時彈窗的坐標(biāo)

mousemove 用來計算鼠標(biāo)移動時彈窗的坐標(biāo)

mouseup 取消彈窗的移動

先來看代碼。

在彈窗上增加了三個事件 mousedown、mousemove、mouseup，用來控制彈窗移動（點擊彈窗頭部進(jìn)行拖拽）。

    data() {
        return {
            x: 0, // 彈窗 X 坐標(biāo)
            y: 0, // 彈窗 Y 坐標(biāo)
            node: null, // 彈窗元素
            isCanMove: false // 是否能拖動彈窗
        }
    },
    mounted() {
        // 將彈窗元素賦值給 node
        this.node = document.querySelector(".modal-container")
    },
    setStartingPoint(e) {
        this.x = e.clientX - this.node.offsetLeft
        this.y = e.clientY - this.node.offsetTop
        this.isCanMove = true
    },

    modalMove(e) {
        if (this.isCanMove) {
            this.node.style.left = e.clientX - this.x + "px"
            this.node.style.top = e.clientY - this.y + "px"
        } 
    },

    cancelMove() {
        this.isCanMove = false
    }

通過這些新增的代碼，這個彈窗就具有了拖拽的功能。

最后附上這個彈窗組件的完整代碼