html元素popover属性解析

popover是一个全局属性，给任意元素添加popover属性后，这个元素就会变成一个悬浮层，层级也会变成最高的，高于页面上的一切，不会被其他元素遮盖，例如全局loading，toast，卡片等场景需求，都可以用到

属性值有俩个：

• auto: 自动(默认值) 浏览器的默认行为，例如点击悬浮层以外的地方会关闭悬浮层，按键盘ESC也会关闭
• manual: 手动 没有默认行为，所有的操作必须由开发者手动操作

<div popover>我是悬浮层</div>
<div popover="auto">我是悬浮层</div>
<div popover="manual">我是悬浮层</div>

悬浮层默认是关闭隐藏的，也不能通过设置属性值显示，显示悬浮层的方式有声明式和命令式两种

1. 第一种声明式

点击按钮显示悬浮层，注意必须是button按钮(popovertarget本身就是button元素的属性，别的元素没有这个属性)，别的元素不行，按钮元素需要添加popovertarget属性，属性值是悬浮层的id属性值(只能是id)

  <button popovertarget="pop">显示悬浮层</button>
  <div id="pop" popover>我是悬浮层</div>

设置一下悬浮层的位置样式

#pop{
   background:rgba(0,0,0,0.5);
   color:#fff;
   font-size: 14px;
   text-align: center;
   width: 100px;
   height: 100px;
   line-height: 100px;
   margin: auto;
}

效果如图所示

声明式第一种

2. 第二种声明式

按钮元素除了添加popovertarget属性，还需添加popovertargetaction属性，属性值有三个:

• show // 打开
• hide // 隐藏
• toggle // 切换，可以传参数true或者false来强制设置显示或者隐藏

    <button popovertargetaction="show"  popovertarget="pop">显示悬浮层</button>
    <button popovertargetaction="hide"  popovertarget="pop">隐藏悬浮层</button>
    <button popovertargetaction="toggle"  popovertarget="pop">切换悬浮层</button>
    <div id="pop" popover>我是悬浮层</div>

第二种声明式.png

3. 命令式

其实就是js控制显示隐藏，这样更加的灵活，应用场景也更加的丰富，例如点击，鼠标hover，键盘事件等
悬浮层元素有三个方法:

• popoverEle.showPopover(); // 打开
• popoverEle.hidePopover(); // 隐藏
• popoverEle.togglePopover(force); // 切换，可以传参数true或者false来强制设置显示或者隐藏

    <div id="btn">js控制显示悬浮层</div>
    <div id="pop" popover>我是悬浮层</div>

    const btn = document.querySelector("#btn");
    const pop = document.querySelector("#pop");
    btn.addEventListener("mouseenter",()=>{
      pop.showPopover();
      console.log(pop.matches(':popover-open'));
    });
    btn.addEventListener("mouseleave",()=>{
      pop.hidePopover();
      console.log(pop.matches(':popover-open'));
    });

命令式.png

判断悬浮层元素显示隐藏状态两种方法

1. matches(':popover-open')
   根据popElement.matches(':popover-open')来判断，返回true或者false
2. 也可以监听悬浮层的toggle事件来监听显示隐藏状态

    // 监听悬浮层元素显示隐藏状态
    pop.addEventListener("toggle", (event)=>{
      if(event.newState === "open"){
        console.log("显示状态");
      }else{
        console.log("隐藏状态");
      }
    });

3. 也可以通过css伪类来选择悬浮层的打开关闭状态

    [popover]{
      display: block; /*默认是display:none，不会有动画*/
      visibility: hidden;
      opacity: 0;
      transform: scale(.6);
      transition: .3s;
    }
    [popover]:popover-open{
      visibility: visible;
      transform: scale(1);
      opacity: 1;
    }

页面中只有一个popover元素，并且层级是最高的，不会被其他元素遮盖

如下图所示，当点击第一个按钮(显示悬浮层)时，页面中所有的popover元素都会隐藏，然后显示第一个按钮关联的popover元素，并且popover元素会实际渲染到下图中的html元素后面，就是顶层#top-layer，也就是层级是最高的，高于页面上的一切。

只显示一个悬浮层.png

兼容性

高级浏览器都已经支持此属性，无需担心兼容性