Vue?dialog模態(tài)框的封裝方法
前言
這個是基于vue2的模態(tài)框封裝,仿照elementUI而寫的組件。
效果如圖
首先我們需要一個遮罩層
<template> ? ? <div class="myDialog"> ? ? ? ? <div v-if="visable" class="dialog_mask" @click="close"></div> ? ? </div> </template> <style> ? .dialog_mask { ? ? width: 100%; ? ? height: 100vh; ? ? background-color: rgba(0, 0, 0, 0.418); ? ? position: fixed; ? ? top: 0; ? ? left: 0; ? ? z-index: 122; ? } </style>
然后是主體部分
<!-- 模態(tài)框內(nèi)容部分 --> ? ? ? <div v-if="visable" class="dialog_window" @mousedown="moveDialog"> ? ? ? ? <header> ? ? ? ? ? <!-- 傳入的標(biāo)題 --> ? ? ? ? ? <h5>{{ title }}</h5> ? ? ? ? ? <!-- x號關(guān)閉 --> ? ? ? ? ? <span @click="close">x</span> ? ? ? ? </header> ? ? ? ? <!-- 插槽插入中間的內(nèi)容 --> ? ? ? ? <div class="ctx"> ? ? ? ? ? <slot></slot> ? ? ? ? </div> ? ? ? ? <!-- 插槽插入底部按鈕 --> ? ? ? ? <div class="footer"> ? ? ? ? ? <slot name="footer"></slot> ? ? ? ? </div> </div>
props傳入的值
props: { ? ? visable: { ?// 數(shù)據(jù)顯示隱藏 ? ? ? type: Boolean, ? ? ? default: false, ? ? }, ? ? title: { ?// 標(biāo)題 ? ? ? type: String, ? ? }, ? ? move: { ?// 是否可拖動 ? ? ? type: Boolean, ? ? ? default: false, ? ? } ? },
對應(yīng)的事件
methods: { ? ? close() { ?// 關(guān)閉功能 ? ? ? this.$emit("update:visable", false); // .sync修飾符 ?父子組件同步更新 ? ? ? this.callBack(this.visable); ? ? }, ? ? moveDialog(e) { ?// 拖動 ? ? ? if (!this.move) return false; ? ? ? let odiv = e.target; ? ? ? ? let disX = e.clientX - odiv.offsetLeft; ? ? ? let disY = e.clientY - odiv.offsetTop; ? ? ? ? document.onmousemove = (e) => { ? ? ? ? let left = e.clientX - disX; ? ? ? ? let top = e.clientY - disY; ? ? ? ? ? odiv.style.left = left + "px"; ? ? ? ? odiv.style.top = top + "px"; ? ? ? }; ? ? ? document.onmouseup = (e) => { ? ? ? ? document.onmousemove = null; ? ? ? ? document.onmousedown = null; ? ? ? }; ? ? }, ? },
以上就是dialog的封裝。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06VUE2.0+Element-UI+Echarts封裝的組件實例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路
這篇文章主要介紹了vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vant 解決tab切換插件標(biāo)題樣式自定義的問題
這篇文章主要介紹了vant 解決tab切換插件標(biāo)題樣式自定義的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11