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-search-input 是 wired-elements 组件库中一款手绘/素描风hand-drawn sketchy的搜索文本输入框 Web Component非常适合线框图wireframe原型、草图风格界面以及追求趣味观感的项目。阅读本文后你将掌握 wired-search-input 的安装引入、属性配置、事件监听与清除按钮交互并能结合 wired-search-input 源码 理解其基于 LitElement 与 Rough.js 的绘制原理。组件概述wired-search-input 的外观与普通input typesearch类似但外层边框与内置的搜索图标、清除图标均由 Rough.js 以抖动线条方式绘制呈现出随手勾勒的素描质感。它是 wired-elements 系列组件wired-button、wired-input、wired-checkbox 等中的一员全部组件可以在 examples 目录下看到对应的 HTML 演示完整组件清单见 src/wired-elements.ts 的统一导出。官方文档 docs/wired-search-input.md 对其定位的描述是Hand-drawn sketchy search text input web component.手绘素描风格的搜索文本输入 Web 组件。安装与引入通过 npm 安装将 wired-elements 添加到你的 JavaScript 项目npm i wired-elements安装后即可在代码中按需导入组件当前仓库package.json中版本为3.0.0-rc.7采用 ESM 模块格式main/module均指向lib/wired-elements.js。在 JavaScript 模块中导入import { WiredSearchInput } from wired-elements; // 或者只导入单个组件减小打包体积 import { WiredSearchInput } from wired-elements/lib/wired-search-input.js;第二种写法直接引用 wired-search-input.ts 编译后的单文件模块适合按需加载场景。wired-search-input 在 src/wired-elements.ts 中通过export * from ./wired-search-input随全量包一同导出。通过 CDN 直接加载无需构建工具直接在 HTML 页面中以 ES Module 方式加载script typemodule srchttps://unpkg.com/wired-elements/lib/wired-search-input.js/script基本用法组件注册的是自定义元素标签wired-search-input在 HTML 中直接书写即可wired-search-input/wired-search-input wired-search-input placeholderSearch here/wired-search-input仓库中的 examples/search-input.html 给出了一个可直接运行的完整示例html head script typemodule src../lib/wired-search-input.js/script style wired-search-input { margin: 5px 15px; } /style /head body wired-search-input placeholderSearch here/wired-search-input wired-search-input placeholderDisabled disabled/wired-search-input /body /html可以看到示例同时演示了普通搜索框与禁用态disabled两种形态。你还可以像普通元素一样用 CSS 直接调整wired-search-input的尺寸、边距、字体等样式因为组件内部样式大量使用了继承见下文样式与定制一节。属性Properties详解官方文档列出的核心属性有三个placeholder、disabled、value。结合 wired-search-input.ts 的源码组件实际对外暴露的属性更多以下逐一说明属性类型默认值说明placeholderString输入框的占位提示文本透传给内部inputdisabledBooleanfalse禁用整个控件源码中使用reflect: true会同步反映到 DOM 属性上valueString当前输入框的文本值支持读写autocompleteString浏览器自动补全行为on/off等autocorrectString移动端自动纠正拼写开关autofocusBooleanfalse页面加载时是否自动聚焦autocapitalizeString—移动端首字母大写策略源码 render 中透传见 wired-search-input.ts前三个属性是官方文档明确说明的placeholderPlaceholder text for the input. 输入框占位文本disableddisables the control. 禁用控件valueValue of the text. 文本的值。value 的读写实现value是组件与外部交互最频繁的属性源码中它是一个 getter/setter 对wired-search-input.tsget value(): string { const input this.input; return (input input.value) || ; } set value(v: string) { if (this.shadowRoot) { const input this.input; if (input) { input.value v; } this.refreshIconState(); } else { this.pendingValue v; } }值得注意的两个细节真实数据源是内部inputvalue直接读写 Shadow DOM 中typesearch的输入框因此读取到的永远是最新文本pendingValue兜底在组件尚未完成首次渲染shadowRoot尚不存在时通过 setter 写入的值会暂存在pendingValue待firstUpdated生命周期wired-search-input.ts中再回填到输入框避免过早赋值丢失firstUpdated() { this.value this.pendingValue || this.value || this.getAttribute(value) || ; delete this.pendingValue; }事件Events官方文档说明Fires all events a standardinputelement fires.触发标准input元素触发的所有事件。组件的 render 模板中wired-search-input.ts为内部输入框绑定了change与input两个事件都交给refire方法统一转发private refire(event: Event) { this.refreshIconState(); event.stopPropagation(); this.fire(event.type, { sourceEvent: event }); }转发时调用的是 wired-base.ts 中的fire方法底层通过CustomEvent派发wired-base.tsexport function fireEvent(e: HTMLElement, name: string, detail?: any) { e.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail })); }也就是说你可以在wired-search-input元素上监听input、change等标准事件事件对象会冒泡并穿透 Shadow DOMcomposed: true事件detail中携带{ sourceEvent: event }sourceEvent指向内部原生输入框触发的事件方便需要读取原生事件细节如keydown相关信息的场景const search document.querySelector(wired-search-input); search.addEventListener(input, (e) { console.log(当前搜索词, search.value); console.log(原生事件, e.detail.sourceEvent); });除了input/change由于组件内渲染的是标准input typesearch元素键盘keydown等、焦点focus/blur等事件同样可以通过监听内部输入框通过search.input属性可拿到内部HTMLInputElement来捕获。例如search.input.addEventListener(keydown, (e) { if (e.key Enter) { // 触发搜索逻辑 } });内置交互搜索图标与一键清除这是 wired-search-input 区别于普通文本输入框的核心交互特性。源码的draw方法wired-search-input.ts在 Sketchy 边框之外额外绘制了两组图标searchIcon放大镜由一个椭圆和一个斜线组成位于输入框右侧closeIcon叉号清除由两条交叉斜线组成位于同一位置。两组图标通过refreshIconStatewired-search-input.ts按当前值动态切换显隐private refreshIconState() { if (this.searchIcon this.closeIcon) { this.searchIcon.style.display this.value.trim() ? none : ; this.closeIcon.style.display this.value.trim() ? : none; } }逻辑为输入框为空时显示放大镜有内容去除首尾空格后非空时显示叉号。叉号对应的清除按钮位于输入框最右侧render 中的button click${() this.value }见 wired-search-input.ts点击后直接清空输入值随后图标状态自动恢复为放大镜。这套图标绘制的底层依赖 wired-lib.ts 中封装的 Rough.js 绘制函数ellipse椭圆wired-lib.ts与line线段wired-lib.ts图标分组g上还附加了.thicker类使描边更粗stroke-width: 1.5。源码原理从 WiredBase 到素描边框wired-search-input 继承自 wired-base.ts 中的抽象基类WiredBase后者继承 LitElement绘制流程是一套通用的响应式重绘机制updated()→wiredRender()任何属性或状态变化触发 Lit 更新后自动调用wiredRenderwired-base.tscanvasSize()通过getBoundingClientRect()获取元素当前尺寸wired-search-input.tsdraw(svg, size)清空 SVG 后调用 Rough.js 渲染函数绘制手绘图形。wired-search-input 依次绘制圆角矩形边框rectangle、放大镜ellipseline、清除叉号两条line每次实例化时生成随机种子seed Math.floor(Math.random() * 2 ** 31)wired-base.ts传递给 wired-lib.ts 中的 Rough.js 选项因此每次刷新页面线条的手抖形态都不同这正是素描质感的来源。绘制使用的 Rough.js 关键参数见 wired-lib.ts包括参数值作用roughness1线条粗糙程度bowing0.85线条弯曲程度maxRandomnessOffset2随机偏移上限strokeWidth1.5描边宽度seed随机每次渲染的随机种子组件在渲染完成后会为宿主元素添加wired-rendered类wired-base.ts配合BaseCSS中:host { opacity: 0 }/:host(.wired-rendered) { opacity: 1 }wired-base.ts实现先隐藏、绘制完成后再淡入的加载效果避免闪烁。样式与定制默认布局组件宿主样式wired-search-input.ts为:host { display: inline-block; position: relative; padding: 10px 40px 10px 5px; font-family: sans-serif; width: 180px; outline: none; }右侧 40px 的内边距专门为放大镜/清除按钮留出空间内部输入框的字体、字号、字重、颜色均继承宿主font-family: inherit等见 wired-search-input.ts因此通过 CSS 设置宿主的字体样式即可整体生效。禁用态disabled属性反映到宿主后wired-search-input.ts:host([disabled]) { opacity: 0.6 !important; cursor: default; pointer-events: none; } :host([disabled]) svg { background: rgba(0, 0, 0, 0.07); }整体半透明并屏蔽鼠标事件SVG 区域叠加浅灰背景视觉上明确表示不可操作。隐藏浏览器原生搜索控件内部输入框是typesearch各浏览器会自带清除按钮等原生 UI。组件通过 CSS 将其全部隐藏wired-search-input.ts统一由自绘的图标和清除按钮接管input[typesearch]::-ms-clear { display: none; width: 0; height: 0; } input[typesearch]::-ms-reveal { display: none; width: 0; height: 0; } input[typesearch]::-webkit-search-decoration, input[typesearch]::-webkit-search-cancel-button, input[typesearch]::-webkit-search-results-button, input[typesearch]::-webkit-search-results-decoration { display: none; }与 wired-input 的对比同一系列中还有一个通用输入框 wired-input.ts两者都继承WiredBase并绘制素描矩形边框。主要区别在于wired-search-input 固定渲染typesearch内置放大镜/清除叉号图标及一键清除按钮wired-input 支持typetext/number 等、name、min/max/step、required、minlength/maxlength、readonly、size等更多表单属性wired-input.ts并通过ResizeObserver监听尺寸变化重绘wired-input.ts两者都支持value的pendingValue延迟回填机制与refire事件转发。如果只是做普通表单输入选 wired-input如果是明确的搜索场景、需要放大镜图标和一键清除则选 wired-search-input。许可证wired-search-input 随 wired-elements 一同以 MIT 协议开源见仓库根目录 LICENSE作者为 Preet Shihn。官方文档的完整说明可参见 docs/wired-search-input.md可运行的演示页面在 examples/search-input.html。参考文件索引官方文档docs/wired-search-input.md组件源码src/wired-search-input.ts基类与事件机制src/wired-base.ts手绘图形绘制库src/wired-lib.ts演示页面examples/search-input.html全量导出入口src/wired-elements.ts项目配置package.json赞分享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-combo详解Wired Elements项目中的手绘风格组合框组件wired combo详解 引言手绘UI的魅力与实用价值 在现代Web开发中用户界面的视觉表现越来越多UI组件前端GitHub_Trending/ma/machine-learning-for-trading中的无监督学习PCA与聚类分析GitHub_Trending/ma/machine learning for trading中的无监督学习PCA与聚类分析 在量化交易领域无监督学习技术能示例工程金融科技机器学习人工智能深度学习Wired Elements 手绘风格进度环组件 wired-progress-ring 详解Wired Elements 手绘风格进度环组件 wired progress ring 详解 组件概述 Wired Elements 项目中的 wired pUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考