@component

动态 列表
@tosmile

從HTML Components的衰落看Web Components的危機

搞前端時間比較長的同學都會知道一個東西,那就是HTC(HTML Components),這個東西名字很現在流行的Web Components很像,但卻是不同的兩個東西,它們的思路有很多相似點,但是前者已是昨日黃花,後者方興未艾,是什麼造成了它們的這種差距呢? HTML Components的一些特性 因為主流瀏覽器裏面只有IE支持過HTC,所以很多人潛意識都認為它不標準,但其實它也是有標準文檔的,

tosmile 头像

@tosmile

昵称 浪遏飛舟

@emonzan

JS 實現 Angular slider 組件

需求描述 需求:根據傳入的動態數組生成一個節點數為數組長度的 slider 組件。要求節點直接長度一致,但是顯示的值為傳入數組的值。 示例: 傳入值為[5], 因為只有一個值,slider 無法拖動,顯示如下 傳入值為[5,10,20,30,40,50,55], 數值之間差值不一定相等,顯示如下 實現邏輯: UI: 先畫一條線作為滑動條,再根據傳入數

emonzan 头像

@emonzan

昵称 Emon

@bianchengsanmei

Web Components系列(一) —— 概述

前言 如果我們選擇不使用任何框架的情況下來進行前端開發,那麼針對一個完整的網頁,我們需要開發以下代碼: HTML 代碼 CSS 代碼 JavaScript 代碼 就幾年之前來説,HTML 部分的代碼基本不存在複用的可能,這就導致我們可能需要開發大量重複的 HTML 代碼,即使使用 CV 法,代碼的冗餘卻是不可避免的。 Web Components 誕生的背景 近幾年,我們在使用前端框架(

bianchengsanmei 头像

@bianchengsanmei

昵称 編程三昧

@viewweiwu

Ant Design 二次封裝 Amiya 發佈啦~🎉🎉🎉

什麼是 amiya amiya 是一個組件庫,是對Ant Design的二次封裝,提供頁面級別的組件。 文檔地址 它有什麼特點? 表單只讀模式 默認的 antd 只對少數組件支持 readonly 模式,而 disabled 模式會把 placeholder 顯示出來,且有可能展示不完整。 所以 amiya 為每一種表單類型,提供 readonly 模式,去除默認的圖標符號,變更背景顏色於文字顏色

viewweiwu 头像

@viewweiwu

昵称 viewweiwu

@tosmile

談一談組件化

前言 今天前端生態裏面,React、Angular和Vue三分天下。雖然這三個框架的定位各有不同,但是它們有一個核心的共同點,那就是提供了組件化的能力。W3C也有Web Component的相關草案,也是為了提供組件化能力。今天我們就來聊聊組件化是什麼,以及它為什麼這麼重要。 正文 其實組件化思想是一種前端技術非常自然的延伸,如果你使用過HTML,相信你一定有過“我要是能定義一個標籤就好了”這樣的

tosmile 头像

@tosmile

昵称 浪遏飛舟

@viewweiwu

100 左右實現查詢表格?真的假的?一起來體驗一下 Amiya 的魅力。

“老哥,聽説你寫的頁面挺多的,我這兒有一個頁面,你覺得你需要多少代碼?” “我看看,也還行吧,不就是個查詢表格嘛,現在大家都用 ProComponent 了,用那個寫一下很快的。我想想,差不多 200 行左右就可以了吧。” “那個呀,我知道,官方的二次封裝組件庫,200 行就可以了嗎?嗯,可以。等等,你説的代碼是否包含了操作按鈕?” “操作按鈕?是指你圖上的 【新增】【詳情】這些按鈕嗎?” “是

viewweiwu 头像

@viewweiwu

昵称 viewweiwu

@mihuartuanr

手把手創建Vue3組件庫

動機 當市面上主流的組件庫不能滿足我們業務需求的時候,那麼我們就有必要開發一套屬於自己團隊的組件庫。 環境 開發環境: vue 3.0 vue/cli 4.5.13 nodeJs 12.16.3 npm 6.14.4 步驟 創建項目 使用 vue-cli 創建一個 vue3 項目,假設項目名為 custom-npm-ui $ vue create custom-npm-ui 手動選擇

mihuartuanr 头像

@mihuartuanr

昵称 米花兒團兒

@jsoncode

在react中基於ant-design,封裝一箇中文輸入框,提高onchange性能

1 antd中,input組件在觸發onChange時,如果是中文輸入模式,會頻繁被觸發,導致頁面性能降低。尤其是在onChange時需要實時搜索的情況。 2 在mac設備下,如果在onChange中使用value.replace(/\s/g,''/), 會出現無法輸入中文的問題。優化之後,可以正常輸入。 默認情況下的Input組件: 優化之後的ChineseInput 調用方式:

jsoncode 头像

@jsoncode

昵称 jsoncode

@invalidnull

關於 Angular 應用 Components 和 Directives 的實例化問題

同 Angular Module 不同,Angular Components 和 Directives 要實例化多次,每個出現在 HTML template 中的 markup 都會對應一次實例化。 此外,這些項的作用域也限定在它們被導入的 NgModule中,以防止兩個組件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異,需要區分一個包含組件和指令的 NgModule 和一個包

invalidnull 头像

@invalidnull

昵称 註銷

@woxiaomaoshihuaihuai

vue動態組件綁定動態屬性和方法的小tips

當使用多 tab 內容頁時,動態組件是一件非常好用的利器。但是循環動態組件會有個問題,那就是不同組件綁定不同的屬性值和方法,全部寫在組件內固然是一種方法,就是不方便管理和查看,所以以下是單獨聲明的技巧小 tips。 切換的tabs常量 const TABS = [ { label: 'tab1', compo: 'RankingList', props: [

woxiaomaoshihuaihuai 头像

@woxiaomaoshihuaihuai

昵称 phoenixhg

@wei4118268_5df1ce05d1877

[vue-cli3/element-plus] 從菜單渲染淺談動態渲染Vue組件的問題

1. 關於Element-plus的菜單渲染問題 跨過了Element-UI,終於來到了Element-plus。又回到了一個老問題,menu的渲染。 創建一個menu數組,利用v-for來渲染數組,生成menu,非常常規的操作。但是操作的過程中,出現了一個小問題,就是關於icon的渲染。 我們知道,在Element-plus中,渲染一個帶圖標的菜單項,是這麼搞的: el-menu-i

wei4118268_5df1ce05d1877 头像

@wei4118268_5df1ce05d1877

昵称 wei4118268

@jihu_gitlab

極狐GitLab 企業級 CI/CD 規模化落地實踐指南(一)

業界已經達成共識:CI/CD 是落地實踐 DevOps 的重要手段,其本質是將軟件交付流程中的步驟自動化運行起來,從而提高軟件交付效率。隨着企業規模擴大(人員增加、產品增多等),高效構建 CI/CD 成為研發效能提升的關鍵。 極狐GitLab CI 內置於極狐GitLab 一體化平台,提供開箱即用的 CI/CD 能力,也是受眾多用户喜愛的 CI 工具之一。極狐GitLab CI 獨特的設計機制和企

jihu_gitlab 头像

@jihu_gitlab

昵称 極狐GitLab

@zxl20070701

從零開始搭建 Vue3 組件庫開發環境

搭建開發環境 Vite初始化 新建一個空的文件夾,比如叫 Vue3UI ,然後使用命令行在此文件夾下使用npm初始化: npm init 回車後,我們再安裝vite(我們這裏選擇使用Vite進行打包,使用別的也類似): npm install --save-dev vite 根目錄創建 index.html 文件,裏面內容如下: !DOCTYPE html html lang="zh-cn"

zxl20070701 头像

@zxl20070701

昵称 zxl20070701