Web Components 系列之實現 MyCard 的基本布局
作者：隱逸王
在這篇文章中，我們只使用 Custom Elements 和 Templates 實現了基本布局和樣式，實用價值基本為零。
前言
前面針對 Web Components 學習了一些基本的理論知識，我們了解到的概念有：
- Custom Elements
- Shadow DOM
- Templates
- Slots
以及和這些概念相關的子知識點。
理論知識基本上夠用了，從現在開始我們需要將理論運用到實踐中，讓理論為實踐服務。今天，我們就使用 Web Components 的相關知識來實現 MyCard 的制作，原型呢就以我們人人都有的身份證做參照吧。
最終實現的基本布局效果如下：
使用 Templates 布局
這里我們使用 HTML 模板將布局先構建出來，代碼如下：
<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">編程三昧</div>
</div>
<div class="info-row">
<div class="info-column">
<div class="info-title">性別</div>
<div class="info-content">男</div>
</div>
<div class="info-column">
<div class="info-title">民族</div>
<div class="info-content">漢</div>
</div>
</div>
<div class="info-row">
<div class="info-column">
<div class="info-title">出生</div>
<div class="info-content">2022</div>
</div>
<div class="info-column">
<div class="info-title">年</div>
<div class="info-content">12</div>
</div>
<div class="info-column">
<div class="info-title">月</div>
<div class="info-content">12</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">xx省xx市xx區xx街道xx小區xx樓xx單元xx樓xx室</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">12345678901234567X</div>
</div>
</div>
</div>
</div>
</template>
創建自定義元素
使用我們前面學習過的方法，創建一個基本的自定義元素 my-card，在自定義組件中引入 Templates 布局，代碼如下：
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({mode: "open"});
let tempEle = document.getElementById("card_layout");
this.shadow.appendChild(tempEle.content);
}
}
customElements.define("my-card", MyCard);
使用自定義元素
在 HTML 的 body 中引入 my-card 標簽：
<my-card></my-card>
總結
最終實現的效果如文章開頭所示。
在這篇文章中，我們只使用 Custom Elements 和 Templates 實現了基本布局和樣式，實用價值基本為零。
在后續中，會加入 Slots 讓自定義元素實現可復用的效果。
~
責任編輯：武曉燕
來源：
編程三昧
