web前端之html弹窗面板的popover新属性_vue中watch里的什么时候执行

前言

1、代码段的功能是在网页上实现一个弹出框。当用户点击"Open Popup"按钮时，会显示一个中央定位的弹出框，弹出框里有"This is a popup"文本，以及两个按钮(“Close"和"confirm”)。点击"Close"按钮将关闭弹出框。通过CSS设置，该弹出框居中显示，样式为深灰色背景，白色文字，并且有一定的圆角效果。
2、该属性新出，慎用。

效果图

html

<button popovertarget="idPopup">Open Popup</button>

<div id="idPopup" popover>
    <div>This is a popup</div>
    <div>
        <button popovertarget="idPopup" popovertargetaction="hide">Close</button>
        <button>confirm</button>
    </div>

</div>
1
2
3
4
5
6
7
8
9
10

1、<button popovertarget="idPopup">Open Popup</button>
1.1、一行html代码，定义一个按钮，按钮上显示文字"Open Popup"。
1.2、popovertarget=“idPopup"是一个属性，表示当点击这个按钮时，将会显示一个目标为idPopup的弹出框(Popup)。
2、<div id="idPopup" popover>
2.1、一个div元素，具有id="idPopup"和popover属性。
2.2、id="idPopup"是这个div元素的唯一标识符，用于在其他地方引用它，例如在按钮上通过popovertarget属性来触发显示这个弹出框。
2.3、popover属性是一个原生属性，用于表示这个div是一个弹出框，默认情况下它会被隐藏，只有在触发特定事件时才会显示。
3、<div>This is a popup</div>
3.1、一个嵌套在idPopup div中的子div，它包含文本"This is a popup”，用于显示在弹出框中。
4、<div>
4.1、另一个嵌套在idPopup div中的子div，它包含两个按钮。
5、<button popovertarget="idPopup" popovertargetaction="hide">Close</button>
5.1、一个关闭按钮，按钮上显示"Close"。
5.2、popovertarget="idPopup"指明这个按钮的目标是idPopup弹出框。
5.3、popovertargetaction="hide"属性指定当点击这个按钮时会隐藏(关闭)idPopup弹出框。
6、<button>confirm</button>
6.1、另一个按钮，按钮上显示"confirm"(确认)。该按钮的功能没有在代码段中明确指明，但通常会用于确认某个操作。

style

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    #idPopup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
        font-family: poppins;
        background-color: rgb(50, 50, 50);
        border-radius: 4px;
        color: #ffffff;

        >div:last-child {
            float: right;
            margin-top: 8px;
        }
    }
}


@keyframes slide {
    from {
        transform: translateY(-68px);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

1、body选择器
该选择器应用于整个页面的body元素。
width: 100vw;设置页面宽度为视口的宽度(100%)。
height: 100vh;设置页面高度为视口的高度(100%)。
margin: 0;和padding: 0;取消了默认的页面边距和内边距。
box-sizing: border-box;调整盒模型，使padding和border被包含在元素的宽度和高度内。
2、#idPopup选择器
这个选择器针对id为idPopup的div元素，设置其样式。
position: absolute;将元素的定位设置为绝对定位。
top: 50%; left: 50%;将元素的左上角定位到父元素的50%位置(一般是相对于body定位)。
transform: translate(-50%, -50%);通过这个转换，将元素的中心点移动到视口的正中间。
margin: 0; padding: 8px;取消外边距并设置内边距为8像素。
box-sizing: border-box;同样是调整盒模型。
font-family: poppins;设置字体为"Poppins"。
background-color: rgb(50, 50, 50);将背景颜色设置为RGB值为(50, 50, 50)的深灰色。
border-radius: 4px;为元素设置4像素的圆角。
color: #ffffff;将文本颜色设置为白色。
3、#idPopup>div:last-child选择器
该选择器应用于id为idPopup的div元素中最后一个子div。
float: right;将这个子div元素浮动到右边。
margin-top: 8px;为该元素的顶部设置8像素的外边距。
4、@keyframes slide动画
一个CSS动画关键帧定义，名为slide。
from表示动画的初始状态。
transform: translateY(-68px);在初始状态下，元素的垂直方向上向上移动68像素。