Vue音乐--搜索页面10_搜索历史布局

大概步骤：

目标效果

---

十、搜索历史组件布局

• 要点：

↓suggestHistory.vue

<div class="search-history" >
	<div class="search-history_title">
		<h1>搜索历史</h1>
		<i class="iconfont" @click="showConfirm">&#xe61d;</i>
	</div>     
	<!--公共组件，历史列表，其他页面会用到-->
	<search-list></search-list>
</div>

  .search-history_title{
    display: flex;
  }
  .search-history_title h1{
    flex: 1;  
  }

↓suggestList.vue

<ul>
	<li v-for="item of searches">
		<p>{{item}}</p>
		<i class="iconfont">&#xe674;</i>
	</li>
</ul>

  .search-list li{
    display: flex;
  }
  .search-list li p{
    flex: 1;
  }

• 数据从getters里获取到

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com