@組件設計 / 博客 RSS 訂閱

Mar 18 2021

蒲公英想養花 - 自定義組件（原創）——組合Ccombine

本組件中使用到了iview的Icon，可以在全局安裝了Iview的項目或者局部引入了Icon的頁面中自由使用。 目錄 效果展示 功能描述 結構代碼 邏輯代碼 組件應用 事件鈎子 github 效果展示 從左到右分別是：未選中狀態、鼠標懸浮、選中、添加組合按鈕 功能描述 添加/刪除組合 單擊聚焦組合 雙擊修改組合名字 切換下一個組合或者新增組合時上一個

組件設計 , vue.js , stylus , iview , 前端

收藏 評論

Nov 28 2025

漢得數字平台 - H-ZERO前端開發：編輯組件選型實用指南！

一、引言 編輯組件作為 H-ZERO 前端生態中的核心組件之一，其選型直接關係到開發效率和產品質量。面對前端開發中編輯組件的多樣選擇。本文將為您揭示 H-ZERO 項目中編輯組件選型思路，幫助您輕鬆應對選型挑戰！ 二、富文本編輯 H-ZERO 前端團隊提供了兩種適用於不同場景的富文本編輯組件： NewRichTextEditor：基於 Quill 2.x 封裝，具有輕量級、易於擴展，功能全面且適

組件設計 , 組件庫 , 前端

收藏 評論

Nov 06 2025

Hard heart - Vue與VueComponent的關係

結論：VueComponent.prototype.__proto__ === Vue.prototype Vue與VueComponent的關係如圖所示： （圖一） 前提知識： 每個函數function都有一個prototype屬性，即顯式原型（屬性），它默認指向Object空對象， 每個實例對象都有一個__proto__屬性，即稱隱式原型（屬性）。 關係圖分析：

組件設計 , vue.js , 原型鏈 , 前端 , Javascript

收藏 評論

Nov 05 2025

歐雷 - 聊聊前端 UI 組件：核心概念

本文是一個文章系列的第一篇，主要説明幾個基本概念以及所要探討的目標主體，目的是統一認知上的「上下文」以儘量避免因信息不對稱而造成理解障礙。 這一系列文章是關於前端 UI 組件的，我想通過這個系列靜下心來好好聊聊與之相關的內容。 每個名詞都是概念，就像一個「數據包」，根據其被「壓縮」的信息量，要真正地理解一個詞語可能需要大量的知識儲備。 基本概念 我們要聊的是「前端 UI 組件」，這個詞可以進一步拆

組件設計 , 軟件設計 , 交互設計 , 組件化 , 前端設計

收藏 評論

Nov 05 2025

歐雷 - 聊聊前端 UI 組件：組件特徵

本文是文章系列「聊聊前端 UI 組件」的第二篇，內容與本系列的上篇文章《聊聊前端 UI 組件：核心概念》有所關聯，如果還沒看過，建議去看下。 本文的主要內容是根據特徵對前端 UI 組件進行建模，讓我們儘可能充分地瞭解它的方方面面，併為如何設計以及建立一個組件體系打下基礎。 組件構成 從關注點分離的角度分解 UI 組件，並分析其各部分的易變性。 構成元素 一個完整的具備功能的 UI 組件的構成，有結

組件設計 , 軟件設計 , 交互設計 , 組件化 , 前端設計

收藏 評論

Nov 05 2025

歐雷 - 聊聊前端 UI 組件：組件體系

本文是文章系列「聊聊前端 UI 組件」的第三篇。 在本系列的上篇文章《聊聊前端 UI 組件：組件特徵》中，通過從關注點分離的角度進行前端 UI 組件的構成分析，並以較為抽象的視角對 UI 組件分門別類，以及描述了讓組件間可以表現複用的繼承關係，從而建立出前端 UI 組件的特徵模型。 本文將以上篇文章中所得出的特徵模型為基礎，探討下如何設計並建立一個前端 UI 組件體系。 在做組件體系設計的時候，最

組件設計 , 軟件設計 , 交互設計 , 組件化 , 前端設計

收藏 評論

Nov 05 2025

歐雷 - 聊聊前端 UI 組件：組件設計

在本系列文章《聊聊前端 UI 組件：組件體系》中初步説明了 UI 組件的架構設計，本文將在此基礎上進一步展開説説那篇文章中一筆帶過的部分，並闡述在設計一個 UI 組件時應該注意的點有哪些。 目錄結構 在《聊聊前端 UI 組件：組件體系》中列出的目錄結構的基礎上做了些許調整—— component ├── demo # 示例相關文件 │ └

組件設計 , 軟件設計 , 交互設計 , 組件化 , 前端設計

收藏 評論

Nov 05 2025

歐雷 - 聊聊中後台前端應用：業務中的組件體系

在我寫的其他系列的文章中有提到—— 在軟件工程中，「組件（component）」一般是指軟件的可複用塊，好比製造業所使用的「構件」。這是一個比較寬泛的概念，它可以是軟件包，可以是 web 服務，也可以是模塊等。 但在前端眼裏，「組件」通常是指頁面上的視圖單元，即「UI 組件」。可以説，「UI 組件」是「組件」的子集。你可能還總會聽到「控件（control）」這個詞。放輕鬆，別抓頭，它只是「U

組件設計 , 後台管理 , 組件化 , 管理後台 , 前端設計

收藏 評論

Oct 27 2025

jsoncode - svg實現漸變百分比組件

參考文檔： 張鑫旭大佬的博客：https://www.zhangxinxu.com/study/201710/colorful-time-count-d... 改造後的效果： 源碼：vue3 script lang="ts" setup 模式版本： template div class="config-progress" :style="`--size:${si

組件設計 , vue3 , Javascript , svg

收藏 評論

Nov 05 2025

歐雷 - 控件即是塊編輯器的「塊」

近期時不時地會想「反混沌前端工程」當前比較重要且優先的兩塊事情：控件（UI 組件）體系 Petals 和通用塊編輯器。 大部分人不會認為這兩者之間有什麼聯繫，然而在我眼中關係可大了去了——它們的「本質」可以近似看作是一個東西。 控件可以認為是當下 GUI 開發的重要基礎設施和基本單元，而在塊編輯器體系中則是「塊」，理論上「塊」就是控件，是被注入特殊狀態的控件——好比一個被施了法術的人成為提線木偶一

組件設計 , 塊元素 , 前端工程 , 前端架構 , 組件化

收藏 評論