笔试题_基于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方法将数组中符合咱们搜索条件的项拿出来进行渲染实现搜索功能。

以上就是这次面试题的全部代码，本人资历不深，若有不正确的地方，欢迎指教，谢谢 ！