企业官网建设流程全解析

• UI组件
• 前端

本指南围绕 wired-elements 项目中wired-textarea自定义元素展开，讲解如何通过 npm 或 CDN 引入该组件、如何使用其全部属性与事件、以及它与原生<textarea>之间的关系。读完本文，你将能够在 wireframe（线框图）、原型或追求手绘趣味界面的项目中，快速集成一个支持多行输入、自动增长并带手绘描边外观的文本框组件。

组件简介：手绘风格的多行文本输入

wired-textarea是一个基于 Web Components（Custom Elements）技术实现的多行文本输入组件，外观为手绘涂鸦风格（sketchy / hand-drawn），由 RoughJS 绘制边框。它适合用于线框图、界面原型，或者任何希望界面带有"手绘感"的趣味场景。该组件内部封装了原生<textarea>，因此保留了原生多行输入的全部行为，同时通过 SVG 覆盖层绘制出手绘边框。

从 src/wired-textarea.ts 的源码可以看到，组件通过@customElement('wired-textarea')注册，继承自WiredBase（见 src/wired-base.ts），并在渲染时调用rectangle()（见 src/wired-lib.ts）基于 RoughJS 生成手绘矩形边框。

安装与引入

通过 npm 安装

在你的 JavaScript 项目中添加 wired-elements 依赖：

npm i wired-elements

在模块代码中导入

import { WiredTextarea } from 'wired-elements'; // 或者按需单独引入该组件模块 import { WiredTextarea } from 'wired-elements/lib/wired-textarea.js';

wired-elements的完整组件清单统一在 src/wired-elements.ts 中导出，其中第 22 行即为export * from './wired-textarea';。

直接在 HTML 页面加载

无需构建工具，通过 unpkg 以 ES Module 方式直接加载：

<script type="module" src="https://unpkg.com/wired-elements/lib/wired-textarea.js?module"></script>

基本使用

在 HTML 中直接使用<wired-textarea>标签即可：

<wired-textarea placeholder="Enter text" rows="6"></wired-textarea>

仓库中提供了可直接运行的示例页面 examples/textarea.html，其中展示了多行数、禁用态等多种组合：

<wired-textarea placeholder="Enter text"></wired-textarea> <wired-textarea placeholder="Enter text 3 rows" rows="3"></wired-textarea> <wired-textarea placeholder="Enter text 6 rows" rows="6"></wired-textarea> <wired-textarea placeholder="Enter text 1 rows" rows="1"></wired-textarea> <wired-textarea disabled placeholder="disabled" rows="2"></wired-textarea>

示例页通过<script type="module" src="../lib/wired-textarea.js"></script>加载组件，并对wired-textarea设置了max-width: 100%与box-sizing: border-box等页面级样式。

属性详解

文档声明的核心属性

其中disabled属性带有reflect: true，会同步反映为宿主元素上的 HTML 属性，便于 CSS 使用:host([disabled])进行样式控制。

源码中提供的更多属性

除了文档列出的五个属性，src/wired-textarea.ts 还暴露了以下与原生<textarea>对齐的属性，可直接通过属性或 JS 属性设置：

这些属性在 render() 方法 中被逐一绑定到内部原生<textarea>上，因此其行为与原生属性保持一致。

value 属性的读写机制

源码中value是一个访问器属性（src/wired-textarea.ts）：读取时返回内部<textarea>的当前值；写入时若组件尚未完成首次渲染（shadowRoot尚未建立），则暂存到pendingValue，待firstUpdated()时再统一回填（src/wired-textarea.ts）。这保证了在组件挂载前就赋值也不会丢失内容。

事件

文档声明组件会触发原生<textarea>元素能触发的全部事件。实现方式见 src/wired-textarea.ts 的refire()方法：内部<textarea>上监听了change与input事件，触发后先stopPropagation()阻止原生事件直接冒泡，再通过this.fire()重新派发同名事件。fire()由 src/wired-base.ts 实现，使用CustomEvent并设置bubbles: true、composed: true，事件detail中携带{ sourceEvent: event }指向原始事件对象。

因此你可以这样监听：

const ta = document.querySelector('wired-textarea'); ta.addEventListener('input', (e) => { console.log('输入内容：', e.detail.sourceEvent.target.value); });

注意change与input均会以自定义事件的形式重新派发，使用e.detail.sourceEvent可以拿到原生事件对象进行进一步处理。

手绘外观的实现原理

wired-textarea的手绘边框并非图片素材，而是运行时动态生成的 SVG：

1. 组件继承 WiredBase，基类在updated()钩子中调用wiredRender()，根据宿主元素尺寸创建 SVG 画布；
2. 组件覆写canvasSize()返回自身getBoundingClientRect()的宽高（src/wired-textarea.ts）；
3. 覆写draw()方法，调用 wired-lib.ts 中的 rectangle() 生成 RoughJS 的roughRectangle路径，绘制出一个四周留有 4px 内缩空间的手绘矩形边框（src/wired-textarea.ts）；
4. 每次绘制的抖动偏移由随机种子seed（Math.floor(Math.random() * 2 ** 31)，见 src/wired-base.ts）决定，因此每次刷新页面边框的手绘抖动细节都略有不同，这正是"手绘感"的来源。

渲染结果通过<div id="overlay">中的 SVG 覆盖在原生<textarea>之上，且 overlay 设置了pointer-events: none（见 src/wired-base.ts），保证 SVG 不会拦截任何鼠标交互，文本编辑操作全部落在真实的<textarea>上。

样式与外观定制

组件默认的宿主样式（src/wired-textarea.ts）包括：

• width: 400px：默认宽度，可被外部 CSS 覆盖；
• font-family: sans-serif：与内部 textarea 继承一致的字体；
• padding: 4px：为手绘边框留出空间；
• 内部textarea的border: none、resize: none、outline: none，并继承宿主的字体、颜色、行高等；
• 禁用态（:host([disabled])）下整体opacity: 0.6、禁用指针事件，并在 SVG 背景上叠加一层浅灰底色（rgba(0, 0, 0, 0.07)）。

你可以在页面中直接通过 CSS 定制尺寸与配色：

wired-textarea { width: 100%; color: #b3541e; /* 边框颜色跟随 currentColor */ }

边框路径使用stroke: currentColor（见 src/wired-base.ts），因此修改宿主元素的color即可改变手绘边框颜色。

限制与注意事项

• 组件高度默认由内容（行数）决定，外部显式设置height会影响 SVG 边框的绘制区域，建议通过rows控制高度，或参考 examples/textarea.html 使用max-width: 100%做响应式约束；
• 组件隐藏了原生resize手柄（resize: none），如需手动调整大小需自行实现；
• 该组件依赖lit与roughjs两个运行时依赖（见 package.json），以 ES Module 方式使用时请确保目标浏览器支持 Custom Elements 与 Shadow DOM；
• value在首次渲染前写入会被暂存并在firstUpdated()时应用，该时序逻辑同样适用于从属性读取初始值（getAttribute('value')，见 src/wired-textarea.ts）。

许可协议

本项目采用 MIT License，版权归 Preet Shihn 所有，详见仓库根目录的 LICENSE。

• UI组件
• 前端