VueMusic-14搜索实现

1.创建search组件

<template>
<div>
<div class="search-title">
<input type="text" name="" placeholder="输入搜索内容" v-model="searchContent">
<button type="button" @click="searchHandler" name="button">搜索</button>
</div>
<ul class="list searchlist">
<router-link :key="index" tag="li" :to="{name:'MusicPlay',params:{songid:item.songid}}" class="song" v-for="(item,index) in songlist">
<div class="left">
<div class="info single-line ">
<div>
<span>{{ item.songname }}</span>
</div>
<span class="txt">{{ item.artistname }}</span>
</div>
</div>
</router-link>
</ul></div>
</template>

<script>
export default{
name:"search",
data(){
return{
searchContent:"",
songlist:[]
}
},
methods:{
searchHandler(){
const searchURL = this.HOST + "/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+this.searchContent;
this.$axios.get(searchURL)
.then(res => {
if(res.data.error_code == 22001){
alert('搜索数据不存在');
return ;
}
this.songlist = res.data.song
})
.catch(error => {
console.log(error);
})
}
}
}
</script>

<style scoped>
.search-title{
padding: 20px;
overflow: hidden;
clear: both;
}

input{
80%;
height: 30px;
line-height: 30px;
background: #fff;
border: 1px solid #f1f2f3;
padding-left: 10px;
float: left;
display: inline-block;
}

button{
float: left;
15%;
height: 30px;
}

.list {
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-all;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}

.list li.song {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
min-height: 55px;
text-align: left;
}

li{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 50px;
border-bottom: 1px solid #F2F2F2;
padding-left: 10px;
}

.list .item.song .left, .list li.song .left {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.list .item .info, .list li .info {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.list li .info>span {
font-weight: 400;
display: block;
font-size: 12px;
color: #999;
}
</style>