笔试题：基于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方法将数组中符合我们搜索条件的项拿出来进行渲染实现搜索功能。
以上就是此次面试题的所有代码，本人资历不深，如有不正确的地方，欢迎指教，谢谢 ！
