wired-elements 手绘风格多行文本框组件 wired-textarea 完整使用指南

UI组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载本指南围绕 wired-elements 项目中wired-textarea自定义元素展开讲解如何通过 npm 或 CDN 引入该组件、如何使用其全部属性与事件、以及它与原生textarea之间的关系。读完本文你将能够在 wireframe线框图、原型或追求手绘趣味界面的项目中快速集成一个支持多行输入、自动增长并带手绘描边外观的文本框组件。组件简介手绘风格的多行文本输入wired-textarea是一个基于 Web ComponentsCustom 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 typemodule srchttps://unpkg.com/wired-elements/lib/wired-textarea.js?module/script基本使用在 HTML 中直接使用wired-textarea标签即可wired-textarea placeholderEnter text rows6/wired-textarea仓库中提供了可直接运行的示例页面 examples/textarea.html其中展示了多行数、禁用态等多种组合wired-textarea placeholderEnter text/wired-textarea wired-textarea placeholderEnter text 3 rows rows3/wired-textarea wired-textarea placeholderEnter text 6 rows rows6/wired-textarea wired-textarea placeholderEnter text 1 rows rows1/wired-textarea wired-textarea disabled placeholderdisabled rows2/wired-textarea示例页通过script typemodule src../lib/wired-textarea.js/script加载组件并对wired-textarea设置了max-width: 100%与box-sizing: border-box等页面级样式。属性详解文档声明的核心属性属性说明默认值以源码为准rowstextarea 初始显示的行数2src/wired-textarea.tsmaxrowstextarea 可增长到的最大行数超过后出现滚动条0表示不限制src/wired-textarea.tsvalue文本内容可读可写空字符串disabled禁用该控件falsesrc/wired-textarea.tsplaceholder输入框的占位提示文本空字符串其中disabled属性带有reflect: true会同步反映为宿主元素上的 HTML 属性便于 CSS 使用:host([disabled])进行样式控制。源码中提供的更多属性除了文档列出的五个属性src/wired-textarea.ts 还暴露了以下与原生textarea对齐的属性可直接通过属性或 JS 属性设置属性类型说明autocompletestring自动补全提示原生autocompleteautofocusboolean页面加载时自动聚焦inputmodestring输入模式如text、numericrequiredboolean是否必填参与表单校验语义readonlyboolean只读模式minlengthnumber最小字符数限制maxlengthnumber最大字符数限制这些属性在 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组件继承 WiredBase基类在updated()钩子中调用wiredRender()根据宿主元素尺寸创建 SVG 画布组件覆写canvasSize()返回自身getBoundingClientRect()的宽高src/wired-textarea.ts覆写draw()方法调用 wired-lib.ts 中的 rectangle() 生成 RoughJS 的roughRectangle路径绘制出一个四周留有 4px 内缩空间的手绘矩形边框src/wired-textarea.ts每次绘制的抖动偏移由随机种子seedMath.floor(Math.random() * 2 ** 31)见 src/wired-base.ts决定因此每次刷新页面边框的手绘抖动细节都略有不同这正是手绘感的来源。渲染结果通过div idoverlay中的 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 DOMvalue在首次渲染前写入会被暂存并在firstUpdated()时应用该时序逻辑同样适用于从属性读取初始值getAttribute(value)见 src/wired-textarea.ts。许可协议本项目采用 MIT License版权归 Preet Shihn 所有详见仓库根目录的 LICENSE。赞分享UI组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载相关推荐PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器PlantUML4IDEA插件完全指南让IntelliJ IDEA秒变专业UML绘图神器 PlantUML4IDEA是一款专为IntelliJ IDEA平台打开发工具IDEWired Elements项目中的手绘风格组合框组件wired-combo详解Wired Elements项目中的手绘风格组合框组件wired combo详解 引言手绘UI的魅力与实用价值 在现代Web开发中用户界面的视觉表现越来越多UI组件前端mlx-community/Fara-7B-4bit性能测试M2 Pro上的解码速度与内存占用实测mlx community/Fara 7B 4bit性能测试M2 Pro上的解码速度与内存占用实测 在AI大模型普及的今天本地部署的性能表现成为开发者和用户创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考