UI图
需求
思路
个人想法，不代表是正确思路
- 网格视图应该想到display: grid;
- 当然还有老生常谈的flex布局
- 我没有抽离成组件，你们可以尝试下，下面代码想要试用，需要修改 <script src="…/base-api/vue.js"> 引用
- 效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
padding: 0;
margin:0;
}
.element{
margin-left: 50px;
margin-top: 50px;
width: 600px;
height: 500px;
border: 1px solid #eee;
}
header{
border-bottom: 1px solid #eee;
padding: 10px 5px 10px;
}
ul{
list-style: none;
}
.list-view li{
padding-left:10px;
padding: 10px 0;
}
.grid-view{
padding: 0 5px;
display: grid;
margin-top:10px;
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-view li{
text-align: center;
height: 50px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="app">
<div class="element">
<header>
<button @click="changeListStyle=true">列表视图</button>
<button @click="changeListStyle=false">网格视图</button @click="changeList">
<input @input="changeList"/>
</header>
<main>
<ul :class="[changeListStyle?'list-view':'grid-view']">
<li v-for="item in testList" :key="item.id">{
{item.value}}</li>
</ul>
</main>
</div>
</div>
<script src="../base-api/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
changeListStyle:true,
testList:[],
realList:[
{
id:2,
value:"test2.txt"
},
{
id:1,
value:"test1.txt"
},
{
id:3,
value:"test3.txt"
},
{
id:4,
value:"test4.txt"
},
{
id:5,
value:"test5.txt"
},
{
id:6,
value:"test6.txt"
},
]
},
created() {
/* 默认排序 */
this.sort()
},
methods: {
/* 改变列表 */
changeList(event){
this.testList= this.realList.filter(item=>item.value.includes(event.target.value))
},
/* 默认排序 */
sort(){
this.testList=this.realList.sort((a,b)=> a.value > b.value ?1:-1);
}
},
});
</script>
</body>
<html>