使用原生js创建自定义标签

Posted 叶家伟的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生js创建自定义标签相关的知识，希望对你有一定的参考价值。

使用原生js创建自定义标签

  1. 效果图

  2. 代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="height: 100px;"></div>
    <popup-info img="img/alt.png" text="提示信息">
</body>
<script>
    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 = \'img/default.png\';
            }
            var img = document.createElement(\'img\');
            img.src = imgUrl;

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

            // 创建css样式
            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和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);
        }
    }

    // 定义组件
    customElements.define(\'popup-info\', PopUpInfo);

</script>

</html>

以上是关于使用原生js创建自定义标签的主要内容，如果未能解决你的问题，请参考以下文章

Vue结合原生js实现自定义组件自动生成

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

vue.js之组件

原生 JS + Canvas 实现五子棋游戏

js原生创建模拟事件和自定义事件的方法