创建并使用自定义标签

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中创建自定义标签

创建并使用自定义标签

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

1. 创建自定义标签

2. 注册自定义标签

3. 使用自定义标签

最新文章

热门文章