前言
在上一節中,使用 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()
時,傳入的都是克隆節點。
~
~ 本文完,感謝閱讀!
~
學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!
本作品採用《CC 協議》,轉載必須註明作者和本文連結