mycard.001
前言
前面针对 Web Components 学习了一些基本的理论知识，我们了解到的概念有：
- Custom Elements
- Shadow DOM
- Templates
- Slots
以及和这些概念相关的子知识点。
理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务。今天，我们就使用 Web Components 的相关知识来实现 MyCard 的制作，原型呢就以我们人人都有的身份证做参照吧。
最终实现的基本布局效果如下：
image-20220217225317835
使用 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 让自定义元素实现可复用的效果。
~
~ 本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
