关于javascript:Web-Components-系列十-实现-MyCard-的基本布局

前言

后面针对 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 让自定义元素实现可复用的成果。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！