Web Components 系列之實(shí)現(xiàn) MyCard 的基本布局
作者：隱逸王
在這篇文章中，我們只使用 Custom Elements 和 Templates 實(shí)現(xiàn)了基本布局和樣式，實(shí)用價(jià)值基本為零。
前言
前面針對(duì) Web Components 學(xué)習(xí)了一些基本的理論知識(shí)，我們了解到的概念有：
- Custom Elements
- Shadow DOM
- Templates
- Slots
以及和這些概念相關(guān)的子知識(shí)點(diǎn)。
理論知識(shí)基本上夠用了，從現(xiàn)在開(kāi)始我們需要將理論運(yùn)用到實(shí)踐中，讓理論為實(shí)踐服務(wù)。今天，我們就使用 Web Components 的相關(guān)知識(shí)來(lái)實(shí)現(xiàn) MyCard 的制作，原型呢就以我們?nèi)巳硕加械纳矸葑C做參照吧。
最終實(shí)現(xiàn)的基本布局效果如下：
使用 Templates 布局
這里我們使用 HTML 模板將布局先構(gòu)建出來(lái)，代碼如下：
<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區(qū)xx街道xx小區(qū)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">公民身份號(hào)碼</div>
</div>
<div class="info-content">12345678901234567X</div>
</div>
</div>
</div>
</div>
</template>
創(chuàng)建自定義元素
使用我們前面學(xué)習(xí)過(guò)的方法，創(chuàng)建一個(gè)基本的自定義元素 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 標(biāo)簽：
<my-card></my-card>
總結(jié)
最終實(shí)現(xiàn)的效果如文章開(kāi)頭所示。
在這篇文章中，我們只使用 Custom Elements 和 Templates 實(shí)現(xiàn)了基本布局和樣式，實(shí)用價(jià)值基本為零。
在后續(xù)中，會(huì)加入 Slots 讓自定義元素實(shí)現(xiàn)可復(fù)用的效果。
~
責(zé)任編輯：武曉燕
來(lái)源：
編程三昧
