共计 3999 个字符,预计需要花费 10 分钟才能阅读完成。
前言
在上一节中,应用 Templates 实现了 MyCard 的根本布局,并且在文章结尾我也说过,因为不可复用,其实用性根本为零。
明天咱们通过应用具名 Slots 在 Templates 中占位,而后再在自定义元素中给 Slots 传值,进步自定义元素的灵活性。
传值剖析
因为每一个人的各项信息都不尽相同,而对应到 Templates 中,就是所有 className 为 .info-content
的 div 中的内容都是可变的,所有可变值总结一下就是:
- userName
- gender
- nation
- birthYear
- birthMonth
- birthDay
- address
- cardNO
就是说,针对每一张 Card,以上这些属性值都须要在自定义组件中传递。
应用 HTML 标签自定义属性
要给自定义组件,除了 Slots,也能够借助 HTML 标签的自定义属性。
第一步:咱们给 Templates 外部的可变项父标签增加 id 标识,比方:
<div class="info-content" id="user_name"> 编程三昧 </div>
第二步:在自定义组件外部获取它自身的用户自定义属性:
class MyCard extends HTMLElement {constructor () {super();
this.shadow = this.attachShadow({mode: "open"});
let tempEle = document.getElementById("card_layout");
this.shadow.appendChild(tempEle.content);
// 获取并填充姓名
let userName = this.getAttribute("userName") || "编程三昧";
this.shadow.querySelector("#user_name").textContent = userName;
// 残余可变项的获取和设置是一样的流程
}
}
第三步:在自定义元素的标签上增加对应的自定义属性:
<my-card userName="隐逸王"></my-card>
通过以上步骤,也是能够实现自定义组件传值的成果的,从而达到组件复用的目标。
应用具名 Slots 传值
尽管下面应用 HTML 标签的自定义属性达到了传值的目标,然而 JS 局部的代码看起来不太好看,上面咱们就用 Slots 传值的形式实现一版。
第一步:给 Templates 减少具名插槽进行占位。
<template id="card_layout">
<style>
* {box-sizing: border-box;}
:host {
display: inline-block;
width: 400px;
height: 240px;
border: 1px solid black;
border-radius: 10px;
box-shadow: -2px -2px 5px 0px #7a8489;
}
.container {
display: flex;
flex-direction: column;
padding: 10px;
height: 100%;
}
.card-body {
flex: 1;
display: flex;
}
.card-footer {padding: 10px 0;}
.main-info {flex: 2;}
.photo {
flex: 1;
display: flex;
align-items: center;
}
.photo img {width: 100%;}
.info-row {
display: flex;
padding-top: 15px;
}
.info-column {
display: flex;
align-items: center;
}
.info-title {
padding: 0 10px;
color: #0e5bd3;
font-size: 12px;
word-break: keep-all;
}
.info-content {letter-spacing: 2px;}
</style>
<div class="container">
<div class="card-body">
<div class="main-info">
<div class="info-row">
<div class="info-column">
<div class="info-title"> 姓名 </div>
</div>
<div class="info-content">
<slot name="userName"> 隐逸王 </slot>
</div>
</div>
<div class="info-row">
<div class="info-column">
<div class="info-title"> 性别 </div>
<div class="info-content">
<slot name="gender"> 男 </slot>
</div>
</div>
<div class="info-column">
<div class="info-title"> 民族 </div>
<div class="info-content">
<slot name="nation"> 汉 </slot>
</div>
</div>
</div>
<div class="info-row">
<div class="info-column">
<div class="info-title"> 出世 </div>
<div class="info-content">
<slot name="birthYear">2022</slot>
</div>
</div>
<div class="info-column">
<div class="info-title"> 年 </div>
<div class="info-content">
<slot name="birthMonth">12</slot>
</div>
</div>
<div class="info-column">
<div class="info-title"> 月 </div>
<div class="info-content">
<slot name="birthDay"></slot>
</div>
</div>
<div class="info-column">
<div class="info-title"> 日 </div>
</div>
</div>
<div class="info-row">
<div class="info-column">
<div class="info-title"> 住址 </div>
</div>
<div class="info-content">
<slot name="address">xx 省 xx 市 xx 区 xx 街道 xx 小区 xx 楼 xx 单元 xx 楼 xx 室 </slot>
</div>
</div>
</div>
<div class="photo">
<img src="./static/photo.jpg">
</div>
</div>
<div class="card-footer">
<div class="info-row">
<div class="info-column">
<div class="info-title"> 公民身份号码 </div>
</div>
<div class="info-content">
<slot name="cardNO">12345678901234567X</slot>
</div>
</div>
</div>
</div>
</template>
第二步:在自定义元素标签内插入带有 slot=‘’
属性的标签及内容。
<my-card>
<span slot="userName"> 编程三昧 </span>
<span slot="gender"> 男 </span>
<span slot="nation"> 汉 </span>
<span slot="birthYear">2002</span>
<span slot="birthMonth">2</span>
<span slot="birthDay">2</span>
<span slot="address"> 银河系太阳系地球村亚洲中国漂亮小区 </span>
<span slot="cardNO">134098567432129485-ZH</span>
</my-card>
最终实现的成果如下:
实现一个网页显示多张 MyCard
如果想要同时展现多个卡片到同一页面,你应用下面代码的话会发现:只有第一个有内容,其余的都为空。这是因为第一个 MyCard 实例将 Templates 的内容都追加在了本人外部,其余的实例获取到的 tempEle.content
都为空节点。
想要解决这个问题,就须要在 MyCard 构造函数外部对 Templates 内容进行克隆,而不是间接应用:
class MyCard extends HTMLElement {constructor () {super();
this.shadow = this.attachShadow({mode: "open"});
let tempEle = document.getElementById("card_layout");
this.shadow.appendChild(document.importNode(tempEle.content,true));
}
}
customElements.define("my-card", MyCard);
总结
本文应用了两种形式向自定义组件传值:
- HTML 标签的自定义属性传值
- 具名 Slots 传值
两种都能够应用,看状况及集体爱好而定吧。
另外,还有一个细节须要留神:appendChild()
办法会将传入的节点整个的挪动地位,传入的那个 Node 在 DOM 中的地位会发生变化,咱们个别在调用 appendChild()
时,传入的都是克隆节点。
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!