🐲 拥抱 webComponent，给你的网页添点彩！

前言

我也是第一次参与活动，利用闲暇时间写了个小组件，如果你喜欢可以去 github 上 fork 自行修改畅玩！

为什么选择 webComponent

即开即用没有框架的束缚

关于如何创建 webComponent 网上有很多教程，如果大家希望我出一期 我也可以总结一下大神们的内容出一期

技术难点

个人认为本项目没有任何技术难点，因为这是我写的第一个 webComponent

实现

---0119更新---

添加小部件

组件在审核暂时贴张图吧

由于字体过大，字体已经进行了压缩

可能有人问你的龙元素在哪呢？

可以仔细看看边框

看不清？大图来了!!

模糊的原因

• 不需要太浮夸
• 因为采用的是 base64 存储，太大就不划算了

文字背景

同样是采用 base64，大家可以在 clone 下来后自行修改

字体大家可以自行设置想要的书法字体

API

<dragon-couplet
    first-line="龙行大运" // 上联
    second-line="前程似锦" // 下联
    central-line="恭迎新春" // 横批
    reverse // 是否从右往左
    style={{
        '--offset-top': '22px', // 横批距离页面顶部的偏移量
        '--couplet-size': '30px', // 文字大小
        '--offset-out': '20px', // 上、下联距离左右的偏移量
        '--font-family': 'SFZT' // 字体
    }}
></dragon-couplet>

最后就可以愉快的添加到页面上了

虽然说强行融入有些突兀，但让网页有了些许年味

以下是我 博客 的样子

点击上面 春 字开关可以开启隐藏,为了保证内容不被遮挡，当宽度在 1700像素 以下是不会显示的