在html中创建自定义标签

Posted tmbm

tags:

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

创建并使用自定义标签

Web Components 标准非常重要的一个特性是,它使开发者能够将html页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

1. 创建自定义标签

  <script>
  class PopUpInfo extends HTMLElement 
    constructor () 
      super();
      // 在此定义自定义标签 我顶一个icon和text并列的
      // Create a shadow root
      let shadow = this.attachShadow(mode: ‘open‘);
  // 创建我们需要的标签
  let wrapper = document.createElement(&#39;div&#39;);
  let iconBox = document.createElement(&#39;div&#39;);
  let textBox = document.createElement(&#39;div&#39;);

  // 为标签添加样式
  wrapper.setAttribute(&#39;class&#39;,&#39;wapper&#39;);
  iconBox.setAttribute(&#39;class&#39;,&#39;icon&#39;);
  textBox.setAttribute(&#39;class&#39;,&#39;text&#39;);

  let text = this.getAttribute(&#39;text&#39;); // 获取标签里面传递的值
  textBox.textContent = text;

  let imgUrl;
  if(this.hasAttribute(&#39;img&#39;)) 
    imgUrl = this.getAttribute(&#39;img&#39;);
   else 
    imgUrl = &#39;default.png&#39;; // 设置一个默认图片
  
  var img = document.createElement(&#39;img&#39;);
  img.src = imgUrl;
  iconBox.appendChild(img);

  // 书写样式
  var style = document.createElement(&#39;style&#39;);
  let lStyleStr = &#39;.wrapper  display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;&#39;
  lStyleStr += &#39;.icon margin-right: 10px; width: 50px; height: 50px;&#39;
  lStyleStr += &#39;.icon img  width: 100%; height: 100%;&#39;
  lStyleStr += &#39;.text  flex: 1; font-size: 14px; color: #333; line-height: 50px;&#39;
  style.textContent = lStyleStr;

  // 将样式和dom元素挂载到页面
  shadow.appendChild(style);
  shadow.appendChild(wrapper);
  wrapper.appendChild(icon);
  wrapper.appendChild(info);



</script>

2. 注册自定义标签

 

  <script>
    customElements.define(‘popup-info‘, PopUpInfo);
  </script>

3. 使用自定义标签

<body>
  <popup-info img="you_picture.jpg" text="你的文字"></popup-info>
</body>

以上是关于在html中创建自定义标签的主要内容,如果未能解决你的问题,请参考以下文章

Django中创建自定义标签与过虑器

如何在 Blend 中创建自定义列表

如何在 VSCode 中创建自定义对话框?

如何在 React Native 中创建自定义顶部导航栏

在 IOS 中创建自定义 UITableView

在 React native 中创建自定义底部选项卡导航器