建站
咨詢
售后
建站咨詢
新聞中心
提到 popover，相信大家都很熟悉，沒錯，就是組件庫里經(jīng)常見到的懸浮層（或者叫“氣泡卡片”），比如 Ant Design。
我們提供的服務有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、莆田ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的莆田網(wǎng)站制作公司
現(xiàn)在，這個好用的特性終于要在Chrome 114上正式支持了~下面花幾分鐘快速了解一下吧。
一、popover 屬性
其實這個名稱以前叫做popup，后來才更改成了popover。
popover是一個全局屬性。給任意元素添加popover以后，它就變成了一個懸浮層。
我是懸浮層popover有兩個值，分別是：
- auto：自動（默認值）。也就是瀏覽器默認行為，比如點擊懸浮層外面會關閉懸浮層，按鍵盤Esc鍵也會關閉懸浮層。
- manual：手動。也就是沒有前面的默認行為，所有操作必須由開發(fā)者手動控制。
我是懸浮層
我是懸浮層
我是懸浮層懸浮層默認是隱藏的，也不能通過屬性設置默認顯示。那么，如何打開一個懸浮層呢？
二、控制懸浮層的方式
控制懸浮層有兩種方式，分別是 聲明式 和 命令式。
首先來看聲明式，經(jīng)常寫原生HTML的應該會很喜歡這種方式，無需 JS 介入就可以實現(xiàn)懸浮層的打開和關閉，如下：
我是 auto 懸浮層只需要通過popovertarget屬性將目標懸浮層的id屬性和按鈕相關聯(lián)就行了（注意，只能是ID），效果如下：
還可以通過popovertargetaction屬性來設置點擊行為，有三個值，分別是：
- show：打開。
- hide：關閉。
- toggle：切換（默認值）。如果懸浮層是關閉的就打開，反正亦然。
我是 auto 懸浮層效果如下：
現(xiàn)在回過頭來看看兩種popover的區(qū)別。
我是 auto 懸浮層
我是 manual 懸浮層效果如下：
可以看到，auto懸浮層點擊空白會自動關閉（還可以通過Esc鍵關閉），而manual懸浮層只能手動去關閉。當然大部分情況下auto可以滿足需求。
三、命令式方式
所謂“命令式”，其實就是一套JS API，需要在 JS中主動去調(diào)用。
那么，有了聲明式為啥還要命令式呢？答案是，更靈活。
比如，前面的聲明式，只適用于click場景，如果需要hover也能打開懸浮層，這種方式就不行了。像這種情況，就可以采用命令式方式了。
先看語法，很簡單，就是 3 個方法。
popoverEl.showPopover(); // 打開
popoverEl.hidePopover(); // 關閉
popoverEl.togglePopover(force) // 切換，可傳參數(shù)，強制設置為 true 或者 false需要注意的是，這 3 個方式僅適用于懸浮層，也就是必須有popover屬性，如果是普通元素，會直接報錯，如下：
還有一種情況，如果一個本來已經(jīng)打開的懸浮層，再次調(diào)用showPopover()，也會報錯，反之亦然
因此，在使用 JS 控制時，推薦使用manual懸浮層，便于精準控制。
下面來看一個hover控制的例子。
我是 hover 懸浮層然后是相關JS。
button.addEventListener('mouseenter', () => {
pop.showPopover()
})
button.addEventListener('mouseleave', () => {
pop.hidePopover()
})效果如下：
四、判斷懸浮層的打開狀態(tài)
首先，從HTML結構上來看，打開和關閉沒有任何屬性變化，這個和details不一樣（details會添加open屬性）。為此，CSS 還專門出了一個偽類:open用于標識懸浮層的打開狀態(tài)。
目前還不穩(wěn)定，后續(xù)可能會更變?yōu)?popover-open。
div
/* 打開樣式 */
}通過這個偽類，我們可以很輕松的給懸浮層添加過渡動畫。
[popover]{
display: block; /*默認是display:none，不會有動畫*/
visibility: hidden;
opacity: 0;
transform: scale(.6);
transition: .3s;
}
[popover]:open{
visibility: visible;
transform: scale(1);
opacity: 1;
}效果如下：
除了 CSS 方式，JS 也能判斷懸浮層的狀態(tài)，但是并不是自己想象的那樣。
起初，我以為有一個屬性可以直接獲取到懸浮層的狀態(tài)，發(fā)現(xiàn)并不行，如下：
popoverEl.open // undefined那如何獲取呢？
其實可以借助前面 CSS 的方式，只要匹配的:open偽類不就可以了嗎，需要用到matches方法。
https://developer.mozilla.org/en-US/docs/Web/API/Element/matches。
這樣就能隨時獲取到懸浮層的打開狀態(tài)了
popoverEl.matches(':open')另外，還可以通過事件監(jiān)聽的方式來獲取，需要用到新的事件toggle，這是一個專門針對popover新推出的事件，使用方式如下：
popoverEl.addEventListener("toggle", (event) => {
if (event.newState === "open") {
console.log("打開狀態(tài)");
} else {
console.log("關閉狀態(tài)");
}
});五、popover 的頂層特性
前面說了那么多，好像并沒有什么很厲害的地方，隨便一個 div 都可以模擬，而且現(xiàn)在的組件庫不是也實現(xiàn)的好好的嗎？到底有什么優(yōu)勢呢？
打開控制臺可以看到，popover上有一個很特殊的標識。
這個就是頂層 top-layer ！也就是層級是最高的，高于頁面上的一切。
這也是懸浮層的意義所在，本身就應該是懸浮在最上面。下面是示意圖
這樣的好處就是無論在 HTML中的任何位置，都無需擔心懸浮層被遮擋的情況，也無需將懸浮層移動的最外層body上。
以上完整代碼可以查看以下任意鏈接：
- popover (juejin.cn)[1]
- popover (codepen.io)[2]
- popover (runjs.work)[3]
如果瀏覽器不支持，會有下面提示：
這個是用@supports實現(xiàn)的。
@supports selector([popover]:open) {
.no-support{
display: none !important;
}
}六、兼容性和總結
看一下兼容性，目前只有Chrome 114+支持，內(nèi)部項目可以嘗鮮一下，如果是Electron應用，那就大膽使用吧。
下面來總結一下本文要點：
- popover是一個全局屬性。給任意元素添加popover以后，它就變成了一個懸浮層。
- popover屬性有兩個值，默認是auto自動模式，支持默認行為，比如點擊空白關閉，鍵盤Esc關閉。
- popover屬性還支持manual手動模式，也就是沒有以上默認行為。
- 控制popover有兩種方式，分別是聲明式和命令式。
- 聲明式是指通過HTML屬性來實現(xiàn)點擊交互。
- 可以通過popovertarget屬性將懸浮層的id和按鈕相關聯(lián)，這樣就能通過按鈕打開懸浮層了。
- 還可以通過popovertargetaction屬性來設置點擊行為，有show、hide、toggle3種方式。
- 命令式是指通過 JS API來實現(xiàn)對懸浮層的控制，相比聲明式而言更加靈活。
- 控制懸浮層的方法有showPopover、hidePopover、togglePopover。
- CSS偽類:open可以區(qū)分懸浮層的打開狀態(tài)。
- JS 可以通過matches(':open')來獲取懸浮層的打開狀態(tài)。
- JS 還可以通過監(jiān)聽toggle事件來獲取懸浮層的打開狀態(tài)，方式是event.newState。
- 相比傳統(tǒng)實現(xiàn)，原生popover最大的優(yōu)勢是支持頂層特性。
最近正在對xy-ui[4]進行升級改造，里面的 popover 組件就使用到了這一特性，不過也對不支持的瀏覽器做了兼容，有興趣的可以去體驗一下。
https://xy-ui.codelabo.cn/components/popover。
參考資料
[1]popover (juejin.cn): https://code.juejin.cn/pen/7229985240335269943。
[2]popover (codepen.io): https://codepen.io/xboxyan/pen/MWPrRod。
[3]popover (runjs.work): https://runjs.work/projects/d38b9c37b0d04897。
[4]xy-ui: https://github.com/XboxYan/xy-ui。
網(wǎng)站欄目：原生 Popover 終于要來了！
文章出自：http://www.5511xx.com/article/cdcepcc.html
