面試題: 手寫collapse(折疊組件)的css/html部分

做一個組件庫不難

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

為自己的職業未來造輪子

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

最終效果

常規版本
常規版本
簡化版
簡化版

html

<div class="a-collapse" >
    <div class="a-collapse__item" open>
        <header>
            <i class="icon-arrow"></i>
            <p>唐詩</p>
        </header>
        <article>
            <p>唐詩,泛指創作于唐朝詩人的詩。唐詩是中華民族珍貴的文化遺產之一,是中華文化寶庫中的一顆明珠,同時也對世界上許多民族和國家的文化發展產生了很大影響,對于后人研究唐代的政治、民情、風俗、文化等都有重要的參考意義和價值。</p>
        </article>
    </div>

    <div class="a-collapse__item">
        <header>
            <i class="icon-arrow"></i>
            <p>宋詞</p>
        </header>
        <article>
            <p>宋代盛行的一種中國文學體裁,宋詞是一種相對于古體詩的新體詩歌之一,標志宋代文學的最高成就。宋詞句子有長有短,便于歌唱。因是合樂的歌詞,故又稱曲子詞、樂府、樂章、長短...</p>
        </article>
    </div>

    <div class="a-collapse__item" open>
        <header>
            <i class="icon-arrow"></i>
            <p>元曲</p>
        </header>
        <article>
            <p>元曲,是盛行于元代的一種文藝形式,包括雜劇和散曲,有時專指雜劇。 雜劇,宋代以滑稽搞笑為特點的一種表演形式,元代發展成戲曲形式。每本以四折為主,在開頭或折間另加楔子,每折用同宮調同韻的北曲套曲和賓白組成。如關漢卿的《竇娥冤...</p>
        </article>
    </div>
</div>

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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"/></svg>')
            }
            >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工作就交給大家完成了:

  1. 給組件增加一個"手風琴"的選項, 就是只可以同時打開一個"頁".
  2. 給每次點擊header標簽的時候, 觸發"頁"的合并和展開.
  3. 給"合并/展開"加個動畫效果,提示這里需要js計算"頁"高度, 才能實現和"餓了么ui中collapse組件"的"合并/展開"一樣的動畫.

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,171評論 0 1
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數內部變量的函數。在本質上,閉包就 是將函數內部和函數外...
    xuguibin閱讀 9,718評論 1 52
  • 本文章是我最近在公司的一場內部分享的內容。我有個習慣就是每次分享都會先將要分享的內容寫成文章。所以這個文集也是用來...
    Awey閱讀 9,467評論 4 67
  • 作為設計工作者,我們經常需要一些圖片素材,比如做海報,做PPT,做設計等等。找到優質高清的圖片素材是重要的一環。 ...
    設計描閱讀 688評論 0 12
  • 1.生成數據 安裝matplotlib 在Python環境下,使用import matplotlib檢測是否安裝成...
    YangDxg閱讀 66,749評論 2 36