做一個組件庫不難

其實vue/react等框架的出現(xiàn), 讓自己做一個ui變得簡單, 大部分的js邏輯都被庫封裝, 反而組件的代碼主要都是css, 所以只要css寫好了, 一個組件就完成60%以上了.

為自己的職業(yè)未來造輪子

vue馬上也快出3了, 現(xiàn)存的所有vue組件庫都會重建, 這又是一個造輪子收集star的好時機, 如果你也想趁機造一個組件庫, 那么開始吧:

最終效果

常規(guī)版本

常規(guī)版本

簡化版

簡化版

html

唐詩

唐詩，泛指創(chuàng)作于唐朝詩人的詩。唐詩是中華民族珍貴的文化遺產(chǎn)之一，是中華文化寶庫中的一顆明珠，同時也對世界上許多民族和國家的文化發(fā)展產(chǎn)生了很大影響，對于后人研究唐代的政治、民情、風(fēng)俗、文化等都有重要的參考意義和價值。

宋詞

宋代盛行的一種中國文學(xué)體裁，宋詞是一種相對于古體詩的新體詩歌之一，標(biāo)志宋代文學(xué)的最高成就。宋詞句子有長有短，便于歌唱。因是合樂的歌詞，故又稱曲子詞、樂府、樂章、長短...

元曲

元曲，是盛行于元代的一種文藝形式，包括雜劇和散曲，有時專指雜劇。 雜劇，宋代以滑稽搞笑為特點的一種表演形式，元代發(fā)展成戲曲形式。每本以四折為主，在開頭或折間另加楔子，每折用同宮調(diào)同韻的北曲套曲和賓白組成。如關(guān)漢卿的《竇娥冤...

scss

// 間距

$space: 4px;

// 單位圓角

$radius: 2px;

// 灰色

$gray-100: #f8f9fa !default;

$gray-300: #dee2e6 !default;

.a-collapse {

overflow: hidden;

border-radius: $radius*2;

border: 1px solid $gray-300;

&__item {

&:nth-of-type(n+2) {

border-top: 1px solid $gray-300;

}

&[open] {

>header {

border-bottom: 1px solid $gray-300;

>i.icon-arrow{

transform: rotate(90deg);

}

}

>article {

display: block;

}

}

>header {

background-color: $gray-100;

padding: 2*$space;

cursor: pointer;

>i.icon-arrow {

width: 1em;

height: 1em;

display: inline-block;

vertical-align: middle;

background-image: url('data:image/svg+xml;utf8,')

}

>p{

display: inline-block;

vertical-align: middle;

}

}

>article {

display: none;

padding: $space;

}

}

// 簡化版本

&[simplify] {

border: none;

.a-collapse__item {

>header {

border: none;

background-color: transparent;

}

}

}

}

js

本文并不想講js, 剩下的js工作就交給大家完成了:

給組件增加一個"手風(fēng)琴"的選項, 就是只可以同時打開一個"頁".

給每次點擊header標(biāo)簽的時候, 觸發(fā)"頁"的合并和展開.

給"合并/展開"加個動畫效果,提示這里需要js計算"頁"高度, 才能實現(xiàn)和"餓了么ui中collapse組件"的"合并/展開"一樣的動畫.

嘿, 看是不是js的工作并不是很多!

總結(jié)

以上是生活随笔為你收集整理的html中collapse代码怎么写,面试题: 手写collapse(折叠组件)的css/html部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。