筆試題_基於vue實現一個文件管理組件

筆試題：基於vue實現一個⽂件管理器組件。

須要效果圖：

要求:

• ⽀持列表和⽹格兩種視圖展⽰⽂件
• ⽀持⽂件按照⽂件名排序
• ⽀持⽂件搜索

考察點:

• 對CSS佈局的掌握
• 組件的抽象和組件間的數據通訊
• 排序功能
• 查找功能

這裏咱們用外部引入vue.js的方式，建立htm頁面，引入vue.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>

按要求完成頁面結構

<form id="main" v-cloak>

    <div class="bar">
        <!-- 這兩個按鈕用於轉換頁面佈局形式，使得UL佈局正確顯示 -->

        <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'">
            列表視圖
        </a>
        <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'">
            網格視圖
        </a>
        <input type="text" @input="search" v-model="searchString" placeholder="請輸入搜索內容">
    </div>
    <!-- 選擇哪一種佈局取決於 layout綁定 -->

    <ul v-if="layout == 'grid'" class="grid">
        <!-- 搜索時數據渲染 -->
        <div v-if="searchData">
            <li v-for="a in searchData">
                <div>{{a}}</div>
            </li>
        </div>
        <!-- 正常數據渲染 -->
        <div v-else>
            <li v-for="a in articles">
                <div>{{a}}</div>
            </li>
        </div>

    </ul>

    <ul v-if="layout == 'list'" class="list">
        <!-- 搜索時數據渲染 -->
        <div v-if="searchData">
            <li v-for="a in searchData">
                <p>{{a}}</p>
            </li>
        </div>
        <!-- 正常數據渲染 -->
        <div v-else>
            <li v-for="a in articles">
                <p>{{a}}</p>
            </li>
        </div>

    </ul>

</form>

頁面搭建完成後設置css樣式：

[v-cloak]{
            display: none;
        }  
  * {
        margin: 0;
        padding: 0;
    }
    
    a,
    a:visited {
        outline: none;
    }
    
    a:hover {
        text-decoration: none;
    }
    /*-------------------------
	導航欄樣式
--------------------------*/
    
    .bar {
        border-radius: 5px;
        width: 580px;
        padding: 10px;
        position: relative;
        line-height: 1;
    }
    
    .bar a {
        width: 105px;
        height: 35px;
        display: inline-block;
        text-decoration: none !important;
        margin-right: 5px;
        border-radius: 5px;
        cursor: pointer;
        background-color: #ccc;
        line-height: 35px;
        text-align: center;
    }
    
    .bar input {
        width: 300px;
        line-height: 19px;
        padding: 11px 0;
        text-align: left;
        font-size: 14px;
        color: #738289;
        outline: none;
        text-indent: 40px;
    }
    /*-------------------------
	列表佈局
--------------------------*/
    
    ul.list {
        list-style: none;
        width: 500px;
        text-align: left;
    }
    
    ul.list li {
        border-bottom: 1px solid #ddd;
        padding: 10px;
        overflow: hidden;
        cursor: pointer;
    }
    /*-------------------------
	網格佈局
--------------------------*/
    
    ul.grid {
        list-style: none;
        width: 570px;
        text-align: left;
    }
    
    ul.grid li {
        margin: 5px 5px 0 0;
        float: left;
        cursor: pointer;
        width: 100px;
        height: 100px;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
    }
    /*------------------
    超出隱藏 
    ------------------*/
    
    ul.grid li div {
        text-align: center;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

接下來就是頁面的數據交互：

var demo = new Vue({
        el: '#main',
        data: {
            // 佈局形式可能的值爲grid或者list
            layout: 'grid',
            articles: [
                "test3.txt", "test4.txt", "test2.txt", "testtest5.txt", "test1.txt"
            ],
            searchString: "",
            searchData: null

        },
        methods: {
            // 數據列表冒泡排序
            sortArticles() {
                let arr = this.articles
                let temp;
                for (var i = 0; i < arr.length - 1; i++) {
                    for (var j = 0; j < arr.length - 1; j++) {
                        if (arr[j].substr(-5, 1) > arr[j + 1].substr(-5, 1)) {
                            temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }

            },
            // 搜索框搜索功能
            search() {

                let searchString = this.searchString
                console.log(searchString, "searchString");
                if (searchString) {
                    this.searchData = this.articles.filter(item => {
                        console.log(item, "item")
                        return item.indexOf(searchString) > -1
                    })
                    console.log(this.searchData, "searchData");
                }
            }
        },
        created() {
            this.sortArticles()
        }
    })

頁面效果：

總結：

• 功能比較簡單，非項目頁面面試題，直接引入外部的vue文件，不須要用腳手架搭建項目。

• 頁面開始，首先要搭建好基礎頁面，根據需求自定義模擬數據，渲染頁面。

• 頁面的tab切換，若是用腳手架搭建項目引入ui組件庫都會有tab欄切換組件。在這裏咱們利用vue的v-bind動態綁定兩種表格樣式，經過v-on點擊事件切換當前表格樣式，經過v-if/v-else
  去判斷當前顯示的表格形式，用v-for循環渲染數據。

• 注意：能夠看到，頁面中使用了v-cloak指令。當網絡較慢，網頁還在加載 Vue.js ，而致使 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。咱們能夠使用 v-cloak 指令來解決這一
  問題。而在工程化項目中，咱們的頁面內容是經過路由掛載實現的，所以就用不到該指令。

• 頁面完成以後，就能夠進行css樣式調整，因人而異吧，可實現的css樣式太多了，我這裏用的是最簡單的css樣式，逐級調整，沒複雜的佈局之類的，這裏就不作贅述。

• 最後就是簡單的數據交互嘍。經過截取數據中的數字，進行冒泡排序。

• 搜索功能的話是利用用數組的filter方法將數組中符合咱們搜索條件的項拿出來進行渲染實現搜索功能。

以上就是這次面試題的全部代碼，本人資歷不深，若有不正確的地方，歡迎指教，謝謝 ！