search

博客列表 >Web Components 系列（十一）—— 实现 MyCard 的可复用

Web Components 系列（十一）—— 实现 MyCard 的可复用

编程三昧
编程三昧原创
2022年02月18日 22:17:43762浏览

MyCard可复用.001

前言

在上一节中，使用 Templates 实现了 MyCard 的基本布局，并且在文章结尾我也说过，因为不可复用，其实用性基本为零。

今天我们通过使用具名 Slots 在 Templates 中占位，然后再在自定义元素中给 Slots 传值，提高自定义元素的灵活性。

传值分析

因为每一个人的各项信息都不尽相同，而对应到 Templates 中，就是所有 className 为 .info-content 的 div 中的内容都是可变的，所有可变值总结一下就是：

  • userName
  • gender
  • nation
  • birthYear
  • birthMonth
  • birthDay
  • address
  • cardNO

就是说，针对每一张 Card，以上这些属性值都需要在自定义组件中传递。

使用 HTML 标签自定义属性

要给自定义组件，除了 Slots，也可以借助 HTML 标签的自定义属性。

第一步：我们给 Templates 内部的可变项父标签添加 id 标识，比如：

  1. <div class="info-content" id="user_name">编程三昧</div>

第二步：在自定义组件内部获取它本身的用户自定义属性：

  1. class MyCard extends HTMLElement {
  2.     constructor () {
  3.         super();
  4.         this.shadow = this.attachShadow({mode: "open"});
  5.         let tempEle = document.getElementById("card_layout");
  6.         this.shadow.appendChild(tempEle.content);
  7.         // 获取并填充姓名
  8.         let userName = this.getAttribute("userName") || "编程三昧";
  9.         this.shadow.querySelector("#user_name").textContent = userName;
  10.         // 剩余可变项的获取和设置是一样的流程
  11.     }
  12. }

第三步：在自定义元素的标签上添加对应的自定义属性：

  1. <my-card userName="隐逸王"></my-card>

通过以上步骤，也是可以实现自定义组件传值的效果的，从而达到组件复用的目的。

使用具名 Slots 传值

虽然上面使用 HTML 标签的自定义属性达到了传值的目的，但是 JS 部分的代码看起来不太美观，下面我们就用 Slots 传值的方式实现一版。

第一步：给 Templates 增加具名插槽进行占位。

  1. <template id="card_layout">
  2.     <style>
  3.         * {
  4.             box-sizing: border-box;
  5.         }
  7.         :host {
  8.             display: inline-block;
  9.             width: 400px;
  10.             height: 240px;
  11.             border: 1px solid black;
  12.             border-radius: 10px;
  13.             box-shadow: -2px -2px 5px 0px #7a8489;
  14.         }
  16.         .container {
  17.             display: flex;
  18.             flex-direction: column;
  19.             padding: 10px;
  20.             height: 100%;
  21.         }
  23.         .card-body {
  24.             flex: 1;
  25.             display: flex;
  26.         }
  28.         .card-footer {
  29.             padding: 10px 0;
  30.         }
  32.         .main-info {
  33.             flex: 2;
  34.         }
  36.         .photo {
  37.             flex: 1;
  38.             display: flex;
  39.             align-items: center;
  40.         }
  42.         .photo img {
  43.             width: 100%;
  44.         }
  46.         .info-row {
  47.             display: flex;
  48.             padding-top: 15px;
  49.         }
  51.         .info-column {
  52.             display: flex;
  53.             align-items: center;
  54.         }
  56.         .info-title {
  57.             padding: 0 10px;
  58.             color: #0e5bd3;
  59.             font-size: 12px;
  60.             word-break: keep-all;
  61.         }
  63.         .info-content {
  64.             letter-spacing: 2px;
  65.         }
  66.     </style>
  67.     <div class="container">
  68.         <div class="card-body">
  69.             <div class="main-info">
  70.                 <div class="info-row">
  71.                     <div class="info-column">
  72.                         <div class="info-title">姓名</div>
  73.                     </div>
  74.                     <div class="info-content">
  75.                         <slot name="userName">隐逸王</slot>
  76.                     </div>
  77.                 </div>
  78.                 <div class="info-row">
  79.                     <div class="info-column">
  80.                         <div class="info-title">性别</div>
  81.                         <div class="info-content">
  82.                             <slot name="gender">男</slot>
  83.                         </div>
  84.                     </div>
  85.                     <div class="info-column">
  86.                         <div class="info-title">民族</div>
  87.                         <div class="info-content">
  88.                             <slot name="nation">汉</slot>
  89.                         </div>
  90.                     </div>
  91.                 </div>
  92.                 <div class="info-row">
  93.                     <div class="info-column">
  94.                         <div class="info-title">出生</div>
  95.                         <div class="info-content">
  96.                             <slot name="birthYear">2022</slot>
  97.                         </div>
  98.                     </div>
  99.                     <div class="info-column">
  100.                         <div class="info-title">年</div>
  101.                         <div class="info-content">
  102.                             <slot name="birthMonth">12</slot>
  103.                         </div>
  104.                     </div>
  105.                     <div class="info-column">
  106.                         <div class="info-title">月</div>
  107.                         <div class="info-content">
  108.                             <slot name="birthDay"></slot>
  109.                         </div>
  110.                     </div>
  111.                     <div class="info-column">
  112.                         <div class="info-title">日</div>
  113.                     </div>
  114.                 </div>
  115.                 <div class="info-row">
  116.                     <div class="info-column">
  117.                         <div class="info-title">住址</div>
  118.                     </div>
  119.                     <div class="info-content">
  120.                         <slot name="address">xx省xx市xx区xx街道xx小区xx楼xx单元xx楼xx室</slot>
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.             <div class="photo">
  125.                 <img src="./static/photo.jpg">
  126.             </div>
  127.         </div>
  128.         <div class="card-footer">
  129.             <div class="info-row">
  130.                 <div class="info-column">
  131.                     <div class="info-title">公民身份号码</div>
  132.                 </div>
  133.                 <div class="info-content">
  134.                     <slot name="cardNO">12345678901234567X</slot>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139. </template>

第二步：在自定义元素标签内插入带有 slot=‘’ 属性的标签及内容。

  1. <my-card>
  2.     <span slot="userName">编程三昧</span>
  3.     <span slot="gender">男</span>
  4.     <span slot="nation">汉</span>
  5.     <span slot="birthYear">2002</span>
  6.     <span slot="birthMonth">2</span>
  7.     <span slot="birthDay">2</span>
  8.     <span slot="address">银河系太阳系地球村亚洲中国美丽小区</span>
  9.     <span slot="cardNO">134098567432129485-ZH</span>
  10. </my-card>

最终实现的效果如下：

image-20220218203827480

实现一个网页显示多张 MyCard

如果想要同时展示多个卡片到同一页面，你使用上面代码的话会发现：只有第一个有内容，其余的都为空。这是因为第一个 MyCard 实例将 Templates 的内容都追加在了自己内部，其余的实例获取到的 tempEle.content 都为空节点。

想要解决这个问题，就需要在 MyCard 构造函数内部对 Templates 内容进行克隆，而不是直接使用：

  1. class MyCard extends HTMLElement {
  2.     constructor () {
  3.         super();
  4.         this.shadow = this.attachShadow({mode: "open"});
  5.         let tempEle = document.getElementById("card_layout");
  6.         this.shadow.appendChild(document.importNode(tempEle.content,true));
  7.     }
  8. }
  9. customElements.define("my-card", MyCard);

总结

本文使用了两种方式向自定义组件传值：

  • HTML 标签的自定义属性传值
  • 具名 Slots 传值

两种都可以使用，看情况及个人喜好而定吧。

另外，还有一个细节需要注意：appendChild() 方法会将传入的节点整个的移动位置，传入的那个 Node 在 DOM 中的位置会发生变化，我们一般在调用 appendChild() 时，传入的都是克隆节点。

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

上一条：insert,update,delete下一条：解决使用SSH命令远程连接Linux服务器加载访问慢，连接超时断开等问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多