vue實(shí)現(xiàn)自定義dialog組件

Guakin_Huang 發(fā)布于2019-08-26 10:41 / 948人閱讀

摘要：平時(shí)過(guò)于依賴組件庫(kù)，如果產(chǎn)品對(duì)某個(gè)組件有特殊的要求。我們與其去改，去覆蓋組件庫(kù)的源碼。還不如自己寫一個(gè)組件，畢竟是自己寫的，不管你想怎么改，都方便容易的很。這里就實(shí)現(xiàn)一個(gè)組件和組件，不基于任何組件庫(kù)。遮罩層使用了做效果

不知道大家有沒(méi)有遇到這種情況。平時(shí)過(guò)于依賴組件庫(kù)，如果產(chǎn)品對(duì)某個(gè)組件有特殊的要求。我們與其去改，去覆蓋組件庫(kù)的源碼。還不如自己寫一個(gè)組件，畢竟是自己寫的，不管你想怎么改，都方便容易的很。這里就實(shí)現(xiàn)一個(gè)dialog組件和input組件，不基于任何組件庫(kù)。供大家參考

效果展示

MDialog.vue

DialogInput.vue

父組件中使用

這里script部分是用ts寫的，你可以改成vue的語(yǔ)法。template和style部分不用改。
窗體部分使用了animate.css的動(dòng)畫，直接下好css,在script導(dǎo)入就可以了。遮罩層使用了transition做fadein fadeout效果

云服務(wù)器 GPU云服務(wù)器自定義dialog 安卓自定義Dialog 自定義選擇組件實(shí)現(xiàn)自定義手勢(shì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106584.html

相關(guān)文章

element-ui dialog組件添加可拖拽位置可拖拽寬高

摘要：最近公司新加需求實(shí)現(xiàn)彈窗可拖拽還要拖拽寬高變化國(guó)際慣例先上圖瀏覽器下作的有幾個(gè)點(diǎn)需要注意一下每個(gè)彈窗都要有唯一可操作指令可以做到拖拽時(shí)要添加可拖拽區(qū)塊由于組件在設(shè)計(jì)時(shí)寬度用了百分比這里不同瀏覽器有兼容性問(wèn)題實(shí)現(xiàn)拖拽寬高時(shí)獲取邊緣問(wèn)題定位設(shè) 最近公司新加需求, 實(shí)現(xiàn)彈窗可拖拽, 還要拖拽寬高變化. 國(guó)際慣例先上圖: edge瀏覽器下作的gif http://www.lano...

jzman 2021-09-01 14:21 評(píng)論0 收藏0
一個(gè)基于Vue.js+Mongodb+Node.js的博客內(nèi)容管理系統(tǒng)

摘要：三更新內(nèi)容在原來(lái)項(xiàng)目的基礎(chǔ)上，做了如下更新數(shù)據(jù)庫(kù)重新設(shè)計(jì)，改成以用戶分組的數(shù)據(jù)庫(kù)結(jié)構(gòu)應(yīng)數(shù)據(jù)庫(kù)改動(dòng)，所有接口重新設(shè)計(jì)，并統(tǒng)一采用和網(wǎng)易立馬理財(cái)一致的接口風(fēng)格刪除原來(lái)游客模式，增加登錄注冊(cè)功能，支持彈窗登錄。這個(gè)項(xiàng)目最初其實(shí)是fork別人的項(xiàng)目。當(dāng)初想接觸下mongodb數(shù)據(jù)庫(kù)，找個(gè)例子學(xué)習(xí)下，后來(lái)改著改著就面目全非了。后臺(tái)和數(shù)據(jù)庫(kù)重構(gòu)，前端增加了登錄注冊(cè)功能，僅保留了博客設(shè)置頁(yè)面，但是...

wh469012917 2019-08-26 11:46 評(píng)論0 收藏0
Electron選擇文件、文件夾對(duì)話框(非原創(chuàng)，傳播)

摘要：文章轉(zhuǎn)載自，感謝文章作者，成功完成選擇文件夾的功能第一種方法，純代碼其原理是利用標(biāo)簽的類別，打開(kāi)選擇文件對(duì)話框通過(guò)標(biāo)簽的事件，將選擇的文件返回。通過(guò)標(biāo)簽對(duì)象的屬性獲得選中的文件名。文章轉(zhuǎn)載自：https://www.jianshu.com/p/e71...，感謝文章作者，成功完成選擇文件夾的功能 1.第一種方法，純js代碼其原理是：利用input標(biāo)簽的file類別，打開(kāi)選擇文件對(duì)話...

Clect 2019-08-23 18:18 評(píng)論0 收藏0
用vue實(shí)現(xiàn)模態(tài)框組件

摘要：組件結(jié)構(gòu)頭部?jī)?nèi)容區(qū)域尾部操作按鈕模態(tài)框結(jié)構(gòu)分為三部分，分別為頭部?jī)?nèi)部區(qū)域和操作區(qū)域，都提供了，可以根據(jù)需要定制。調(diào)用點(diǎn)擊確定按鈕的回調(diào)處理點(diǎn)擊取消按鈕的回調(diào)處理用創(chuàng)建一個(gè)索引就很方便拿到模態(tài)框組件內(nèi)部的方法了。基本上每個(gè)項(xiàng)目都需要用到模態(tài)框組件，由于在最近的項(xiàng)目中，alert組件和confirm是兩套完全不一樣的設(shè)計(jì)，所以我將他們分成了兩個(gè)組件，本文主要討論的是confirm組件的實(shí)...

mrcode 2019-08-21 14:28 評(píng)論0 收藏0
前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

摘要：發(fā)布是由團(tuán)隊(duì)開(kāi)源的，操作接口庫(kù)，已成為事實(shí)上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來(lái)了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評(píng)論0 收藏0