日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

提到 popover，相信大家都很熟悉，沒錯(cuò)，就是組件庫里經(jīng)常見到的懸浮層（或者叫“氣泡卡片”），比如 Ant Design。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、莆田ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的莆田網(wǎng)站制作公司

現(xiàn)在，這個(gè)好用的特性終于要在Chrome 114上正式支持了~下面花幾分鐘快速了解一下吧。

一、popover 屬性

其實(shí)這個(gè)名稱以前叫做popup，后來才更改成了popover。

popover是一個(gè)全局屬性。給任意元素添加popover以后，它就變成了一個(gè)懸浮層。

我是懸浮層

popover有兩個(gè)值，分別是：

• auto：自動(dòng)（默認(rèn)值）。也就是瀏覽器默認(rèn)行為，比如點(diǎn)擊懸浮層外面會(huì)關(guān)閉懸浮層，按鍵盤Esc鍵也會(huì)關(guān)閉懸浮層。
• manual：手動(dòng)。也就是沒有前面的默認(rèn)行為，所有操作必須由開發(fā)者手動(dòng)控制。

我是懸浮層
我是懸浮層
我是懸浮層

懸浮層默認(rèn)是隱藏的，也不能通過屬性設(shè)置默認(rèn)顯示。那么，如何打開一個(gè)懸浮層呢？

二、控制懸浮層的方式

控制懸浮層有兩種方式，分別是 聲明式 和 命令式。

首先來看聲明式，經(jīng)常寫原生HTML的應(yīng)該會(huì)很喜歡這種方式，無需 JS 介入就可以實(shí)現(xiàn)懸浮層的打開和關(guān)閉，如下：

打開 auto 懸浮層
我是 auto 懸浮層

只需要通過popovertarget屬性將目標(biāo)懸浮層的id屬性和按鈕相關(guān)聯(lián)就行了（注意，只能是ID），效果如下：

還可以通過popovertargetaction屬性來設(shè)置點(diǎn)擊行為，有三個(gè)值，分別是：

• show：打開。
• hide：關(guān)閉。
• toggle：切換（默認(rèn)值）。如果懸浮層是關(guān)閉的就打開，反正亦然。

打開 auto 懸浮層
關(guān)閉 auto 懸浮層
切換 auto 懸浮層
我是 auto 懸浮層

效果如下：

現(xiàn)在回過頭來看看兩種popover的區(qū)別。

切換 auto 懸浮層
切換 manual 懸浮層
我是 auto 懸浮層
我是 manual 懸浮層

效果如下：

可以看到，auto懸浮層點(diǎn)擊空白會(huì)自動(dòng)關(guān)閉（還可以通過Esc鍵關(guān)閉），而manual懸浮層只能手動(dòng)去關(guān)閉。當(dāng)然大部分情況下auto可以滿足需求。

三、命令式方式

所謂“命令式”，其實(shí)就是一套JS API，需要在 JS中主動(dòng)去調(diào)用。

那么，有了聲明式為啥還要命令式呢？答案是，更靈活。

比如，前面的聲明式，只適用于click場景，如果需要hover也能打開懸浮層，這種方式就不行了。像這種情況，就可以采用命令式方式了。

先看語法，很簡單，就是 3 個(gè)方法。

popoverEl.showPopover(); // 打開
popoverEl.hidePopover(); // 關(guān)閉
popoverEl.togglePopover(force) // 切換，可傳參數(shù)，強(qiáng)制設(shè)置為 true 或者 false

需要注意的是，這 3 個(gè)方式僅適用于懸浮層，也就是必須有popover屬性，如果是普通元素，會(huì)直接報(bào)錯(cuò)，如下：

還有一種情況，如果一個(gè)本來已經(jīng)打開的懸浮層，再次調(diào)用showPopover()，也會(huì)報(bào)錯(cuò)，反之亦然

因此，在使用 JS 控制時(shí)，推薦使用manual懸浮層，便于精準(zhǔn)控制。

下面來看一個(gè)hover控制的例子。

hover 打開懸浮層
我是 hover 懸浮層

然后是相關(guān)JS。

button.addEventListener('mouseenter', () => {
  pop.showPopover()
})
button.addEventListener('mouseleave', () => {
  pop.hidePopover()
})

效果如下：

四、判斷懸浮層的打開狀態(tài)

首先，從HTML結(jié)構(gòu)上來看，打開和關(guān)閉沒有任何屬性變化，這個(gè)和details不一樣（details會(huì)添加open屬性）。為此，CSS 還專門出了一個(gè)偽類:open用于標(biāo)識懸浮層的打開狀態(tài)。

目前還不穩(wěn)定，后續(xù)可能會(huì)更變?yōu)?popover-open。

div
  /* 打開樣式 */
}

通過這個(gè)偽類，我們可以很輕松的給懸浮層添加過渡動(dòng)畫。

[popover]{
  display: block; /*默認(rèn)是display:none，不會(huì)有動(dòng)畫*/
  visibility: hidden;
  opacity: 0;
  transform: scale(.6);
  transition: .3s;
}
[popover]:open{
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}

效果如下：

除了 CSS 方式，JS 也能判斷懸浮層的狀態(tài)，但是并不是自己想象的那樣。

起初，我以為有一個(gè)屬性可以直接獲取到懸浮層的狀態(tài)，發(fā)現(xiàn)并不行，如下：

popoverEl.open // undefined

那如何獲取呢？

其實(shí)可以借助前面 CSS 的方式，只要匹配的:open偽類不就可以了嗎，需要用到matches方法。

https://developer.mozilla.org/en-US/docs/Web/API/Element/matches。

這樣就能隨時(shí)獲取到懸浮層的打開狀態(tài)了

popoverEl.matches(':open')

另外，還可以通過事件監(jiān)聽的方式來獲取，需要用到新的事件toggle，這是一個(gè)專門針對popover新推出的事件，使用方式如下：

popoverEl.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("打開狀態(tài)");
  } else {
    console.log("關(guān)閉狀態(tài)");
  }
});

五、popover 的頂層特性

前面說了那么多，好像并沒有什么很厲害的地方，隨便一個(gè) div 都可以模擬，而且現(xiàn)在的組件庫不是也實(shí)現(xiàn)的好好的嗎？到底有什么優(yōu)勢呢？

打開控制臺可以看到，popover上有一個(gè)很特殊的標(biāo)識。

這個(gè)就是頂層 top-layer ！也就是層級是最高的，高于頁面上的一切。

這也是懸浮層的意義所在，本身就應(yīng)該是懸浮在最上面。下面是示意圖

這樣的好處就是無論在 HTML中的任何位置，都無需擔(dān)心懸浮層被遮擋的情況，也無需將懸浮層移動(dòng)的最外層body上。

以上完整代碼可以查看以下任意鏈接：

• popover (juejin.cn)^[1]
• popover (codepen.io)^[2]
• popover (runjs.work)^[3]

如果瀏覽器不支持，會(huì)有下面提示：

這個(gè)是用@supports實(shí)現(xiàn)的。

@supports selector([popover]:open) {
    .no-support{
        display: none !important;
    }
}

六、兼容性和總結(jié)

看一下兼容性，目前只有Chrome 114+支持，內(nèi)部項(xiàng)目可以嘗鮮一下，如果是Electron應(yīng)用，那就大膽使用吧。

下面來總結(jié)一下本文要點(diǎn)：

1. popover是一個(gè)全局屬性。給任意元素添加popover以后，它就變成了一個(gè)懸浮層。
2. popover屬性有兩個(gè)值，默認(rèn)是auto自動(dòng)模式，支持默認(rèn)行為，比如點(diǎn)擊空白關(guān)閉，鍵盤Esc關(guān)閉。
3. popover屬性還支持manual手動(dòng)模式，也就是沒有以上默認(rèn)行為。
4. 控制popover有兩種方式，分別是聲明式和命令式。
5. 聲明式是指通過HTML屬性來實(shí)現(xiàn)點(diǎn)擊交互。
6. 可以通過popovertarget屬性將懸浮層的id和按鈕相關(guān)聯(lián)，這樣就能通過按鈕打開懸浮層了。
7. 還可以通過popovertargetaction屬性來設(shè)置點(diǎn)擊行為，有show、hide、toggle3種方式。
8. 命令式是指通過 JS API來實(shí)現(xiàn)對懸浮層的控制，相比聲明式而言更加靈活。
9. 控制懸浮層的方法有showPopover、hidePopover、togglePopover。
10. CSS偽類:open可以區(qū)分懸浮層的打開狀態(tài)。
11. JS 可以通過matches(':open')來獲取懸浮層的打開狀態(tài)。
12. JS 還可以通過監(jiān)聽toggle事件來獲取懸浮層的打開狀態(tài)，方式是event.newState。
13. 相比傳統(tǒng)實(shí)現(xiàn)，原生popover最大的優(yōu)勢是支持頂層特性。

最近正在對xy-ui[4]進(jìn)行升級改造，里面的 popover 組件就使用到了這一特性，不過也對不支持的瀏覽器做了兼容，有興趣的可以去體驗(yàn)一下。

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。

文章標(biāo)題：原生 Popover 終于要來了！
瀏覽路徑：http://m.5511xx.com/article/cdcepcc.html