筆試題：基於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方法將數組中符合我們搜索條件的項拿出來進行渲染實現搜索功能。
以上就是此次面試題的所有代碼，本人資歷不深，如有不正確的地方，歡迎指教，謝謝 ！