開發一個簡單的 Vue 彈窗組件

hiyang 發布于2019-08-23 18:06 / 3448人閱讀

摘要：取消確認現在彈窗組件的結構已經搭建出來了。另外還有兩個方法，分別是點擊取消和確認的回調函數，它們的作用是觸發對應的事件。到這里，一個簡單的彈窗組件已經完成了樣式后面再說。一個彈窗組件的拖拽一般通過三個事件來控制，分別是。

更多文章

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

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

內容層是放我們要展示的內容的容器。

現在彈窗組件的結構已經搭建出來了。

類 modal-bg: 遮罩層

類 modal-container: 內容層容器

類 modal-header: 內容層頭部

類 modal-main: 內容層主體部分（用來展示內容）

類 modal-footer: 內容層腳部

屬性 v-show: 控制彈窗的展示與關閉

屬性 title: 標題

方法 hideModal: 點擊取消的回調函數

方法 submit: 點擊確認的回調函數

插槽 slot: 用來展示內容

定義完 HTML 結構，還得定義組件的 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（控制彈窗展示與關閉）和 title（彈窗標題）。
另外還有兩個方法，分別是點擊取消和確認的回調函數，它們的作用是觸發對應的事件。
到這里，一個簡單的彈窗組件已經完成了（樣式后面再說）。

如何調用

一個組件寫完了，要怎么調用呢？

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


    這里放彈窗的內容

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

        submit() {
            // 確認彈窗回調
            this.show = false
        }
    }
}

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

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

改進樣式

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

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

功能

看起來這個簡單的彈窗組件真的是非常簡單，我們可以在此基礎上適當的增加一些功能，例如：拖拽。

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

mousedown 用來獲取鼠標點擊時彈窗的坐標

mousemove 用來計算鼠標移動時彈窗的坐標

mouseup 取消彈窗的移動

先來看代碼。

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

    data() {
        return {
            x: 0, // 彈窗 X 坐標
            y: 0, // 彈窗 Y 坐標
            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
    }

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

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

GPU云服務器云服務器 vue組件開發 vue組件 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104688.html

vue插件開發練習--實用彈窗

摘要：前言上回說了組件組件開發練習焦點圖切換的一個練習項目，這次換下口味，說下的插件練手的項目。和組件開發的目錄相比，區別就在于這個文件夾上。開發過程把項目跑起來首先，先弄這個組件。最后還需要一個變量，控制彈窗是否顯示。 1.前言上回說了組件（vue組件開發練習--焦點圖切換）的一個練習項目，這次換下口味，說下vue的插件練手的項目。相對于現在之前的焦點圖切換的組件，這個可能就更簡單了，基...

muzhuyu 2019-08-22 11:06 評論0 收藏0
從Dialog管理談到Vue渲染原理

摘要：在組件內，我們觸及不到組件的模板，所以簡單的在動態模板上添加并不能完成事件監聽。簡單來說，依賴收集是在渲染函數渲染的函數中進行的，在中一旦通過使用了這個變量，通過這個變量的就收集到了正在執行的渲染函數這一個依賴。作為一個中后臺表單&表格工程師，經常需要在一個頁面中處理多個彈窗。我自己的項目中，一個復雜的審核頁面中的彈窗數量超過了30個，如何管理大量的彈窗就成為了一個需要考慮的問題。 ...

darkbug 2019-08-23 13:56 評論0 收藏0
關于 vue 彈窗組件的一些感想

摘要：最近是用開發了一套組件庫在開發過程對對于組件化的開發有一些感想，于是開始記錄下這些。彈窗組件一直是開發中必備的，使用頻率相當高，最常見的莫過于，，這些曾經我們都會用來調試程序不同的組件庫對于彈窗的處理也是不一樣的。最近是用 vue 開發了一套組件庫 vue-carbon , 在開發過程對對于組件化的開發有一些感想，于是開始記錄下這些。彈窗組件一直是 web 開發中必備的，使用頻率相...

idealcn 2019-08-22 10:36 評論0 收藏0
基于 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)組件.

摘要：基于開發的插件包含仿照原生樣式來源一些想法剛開始的時候想要用現成的彈窗組件來著但是查找一圈沒有發現比較合適項目的所以才自己開發了一個包含四種并且可以單個引入的組件開發實際上比較簡單有興趣的可以看下源碼實現步驟很清晰關于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發的插件包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

Darkgel 2019-08-21 11:41 評論0 收藏0
論如何用Vue實現一個彈窗-一個簡單的組件實現

摘要：前言最近在使用框架，用到了對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。現在基本上彈窗組件都已實現的差不多了，還差一個彈窗的關閉事件，這里就涉及到子組件往父組件傳參了。前言最近在使用element-ui框架，用到了Dialog對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實現方式與大家...

xialong 2019-08-22 16:38 評論0 收藏0