您好,登錄后才能下訂單哦!
vue如何簡單的實現(xiàn)彈框,遮罩,點擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個div作為遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意擴展。
v-if 是直接刪除dom節(jié)點, 就是這個div就不存在了
v-show 是控制dom的css樣式設(shè)置為 display: none; 來實現(xiàn),dom還是存在;
實現(xiàn)如下
maskshow來控制控制遮罩的顯示隱藏,綁定一個時間點擊遮罩的時候關(guān)閉它
<div class="mask" v-show="maskShow" @click="setMaskShow"> </div>
有一個彈框它的顯示和遮罩一樣,里面有個關(guān)閉按鈕也可以關(guān)閉彈框,函數(shù)里只需要將maskShow值取反即可
<div class="child" v-show="maskShow"> <button @click="setMaskShow">關(guān)閉</button> </div>
其他方法
點擊時候觸發(fā)該方法, 判斷點的區(qū)域
hidePanel(event) { let dom = document.getElementById("child"); if (dom) { if (!dom.contains(event.target)) { //這句是說如果我們點擊到了id為child以外的區(qū)域 this.maskShow = false; } } }
全部代碼如下
<template> <div class="father"> <div class="mask" v-show="maskShow" @click="setMaskShow"></div> <div class="child" id="child" v-show="maskShow"> <button @click="setMaskShow">關(guān)閉</button> </div> <button @click="setMaskShow">click</button> </div> </template> <script> export default { data: function(){ return { maskShow: false, } }, methods: { setMaskShow(){ this.maskShow = !this.maskShow; } } } </script> <style> .father{ width: 100%; height: 100%; } .mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.3; } button{ width: 100px; height: 40px; line-height: 40px; text-align: center; } .child{ position: fixed; width: 400px; height: 400px; border: 1px solid #ccc; text-align: center; line-height: 400px; top: calc(50% - 200px); left: calc(50% - 200px); background: #fff; } </style>
下面談?wù)?Vue.js 里 v-if 與 v-show 的區(qū)別
在 Vue 項目中,v-if 和 v-show 算是兩個用得很頻繁的指令,很巧的是它倆在表現(xiàn)上也相似,都是動態(tài)顯示 DOM 元素。不過既然是兩個不同指令,肯定會有不同的適用場景,帶著好奇,讓我們在 Vue 官方文檔里一探究竟吧~
對于v-if大家應(yīng)該不會陌生,不管哪種編程語言都會有 if-else 的流程控制。
例如,在 Java 中:
if (condition) { //some code here } else { //some code here, too }
當(dāng)然在 Vue.js 中,v-if 也是執(zhí)行這樣的功能。稍有不同的是在 template 中用 v-if 條件渲染一整組,類似地,同時也可使用 v-else 指令來表示 v-if 的 “else塊”:
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
另一個用于根據(jù)條件展示元素的選項是 v-show 指令,用法大致一樣:
<h2 v-show=true>Hello!</h2>
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 display 屬性。
看到這里大家應(yīng)該對 v-if 與 v-show 的區(qū)別有一個簡單的概念了。
接下來將會為大家詳細(xì)介紹兩者的不同:
v-if 是”真正的”條件渲染,因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
同時 v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——直到條件第一次變?yōu)檎鏁r,才會開始渲染條件塊。
相比之下,v-show 就簡單得多——不管初始條件是什么,元素總是會被渲染,并且只是簡單地基于 CSS 進(jìn)行切換。
所以一般來說,v-if 具有更高的切換開銷,而 v-show 具有更高的初始渲染開銷。
因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件不太可能改變,則使用 v-if 更好。
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)彈框遮罩點擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。