customElement.html

spencer_tseng

于 2023-12-02 01:32:44 发布

阅读量358

点赞数 9

分类专栏： js-flex 文章标签： html

本文链接：https://blog.csdn.net/spencer_tseng/article/details/134746631

版权

js-flex 专栏收录该内容

99 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="cejs.js"></script>
<script type="text/javascript">
//2022.08.09  ZengWenFeng 13805029595
//自定义组件JS
class PopUpInfo extends HTMLElement 
{
    constructor() 
    {
        super();

        // 创建文本框
        var info = document.createElement('span');
        info.setAttribute('class', 'info');
        
        // 获取自定义标签的text属性
        var text = this.getAttribute('text');
        info.textContent = text;

        // 创建图片元素
        var imgUrl;
        if (this.hasAttribute('img')) 
        {
            imgUrl = this.getAttribute('img');
        }
        else
        {
            imgUrl = '../zwf/default.png';
        }
        
        //
        var img = document.createElement('img');
        img.src = imgUrl;

        var icon = document.createElement('span');
        icon.setAttribute('class', 'icon');
        icon.appendChild(img);

      	//---------------创建css样式,注意下面有个`就是我们键盘1和！前面那个按钮哦
        var style = document.createElement('style');
        style.textContent = 
        `
            .wrapper
            {
                position: relative;
            }
            .info
            {
                font-size: 0.8rem;
                width: 200px;
                display: inline-block;
                border: 1px solid black;
                padding: 10px;
                background: white;
                border-radius: 10px;
                opacity: 0;
                transition: 0.6s all;
                position: absolute;
                bottom: 20px;
                left: 10px;
                z-index: 3;
            }
            img
            {
                width: 1.2rem;
            }
            .icon:hover + .info, .icon:focus + .info
            {
                opacity: 1;
            }
        `;
        //---------------创建css样式,注意下面有个`就是我们键盘1和！前面那个按钮哦

        // 创建根元素，作用其实是将分离的css和html聚合起来
        var shadow = this.attachShadow({ mode: 'open' });
        // 创建一个span标签包裹内容
        var wrapper = document.createElement('span');
        wrapper.setAttribute('class', 'wrapper');
        
        // 将创建的style节点追加到影子节点中
        shadow.appendChild(style);
        // 依次将html按照层级关系添加
        shadow.appendChild(wrapper);
        
        wrapper.appendChild(icon);
        wrapper.appendChild(info);
    }
}

// 定义组件
//https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements
customElements.define('ce-zwf', PopUpInfo);


//http://127.0.0.1:7070/PrjJsp/customElement/customElement.html
</script>
</head>
<body>
	<div style="height: 100px;"></div>
	<ce-zwf img="zwf/img.png" text="zengwenfeng"> </ce-zwf>
</body>
</html>

自定义组件，自定义控件ce-zwf