Vue 实现腾讯新闻案例

父组件：

<template>
<div>

<div class="news-top">

<div style="background-color: white;">
<input type="text"
@keydown.enter="search"
v-model="kw"
@focus="handleFocus"
@blur="handleBlur"
@keydown.down="down"
@keydown.up="up">

<button @click="search">搜索</button>
</div>

<div class="search-list" v-show="isSearch">
<div v-for="(item,index) in searchRecord"
:class="{'active':activeIndex==index}">
{{item}}
</div>
</div>

</div>

<div style="margin-top: 30px;">

<div v-for="(item,index) in newsList">

<NewsCard1
v-if="item.imageUrls != null && item.imageUrls.length >= 3"
:title="item.title"
:imageUrls="item.imageUrls"
:publishDate="item.publishDate"
:posterScreenName="item.posterScreenName">
</NewsCard1>

<NewsCard2
v-if="item.imageUrls != null && item.imageUrls.length > 0 && item.imageUrls.length < 3"
:title="item.title"
:imageUrls="item.imageUrls"
:publishDate="item.publishDate"
:posterScreenName="item.posterScreenName">
</NewsCard2>

</div>

<p style="text-align: center;">
<button v-show="isShow" @click="getMore">加载更多</button>
<span v-show="isHide">{{load}}</span>
</p>

</div>

</div>
</template>

<script>
import NewsCard1 from '../components/NewsCard1.vue'
import NewsCard2 from '../components/NewsCard2.vue'
export default{
components:{
NewsCard1,
NewsCard2
},
data(){
return{
kw:'', //搜索关键词
newsList:[],
page:1, //页数
isShow:false, //显示或隐藏'加载更多'
isHide:false, //显示或隐藏'正在加载...'
load:'正在加载...',
searchRecord:[], //搜索记录
isSearch:false, //显示或隐藏'搜索记录'
activeIndex:-1 //被选中的记录的下标
}
},
created() { //初始化保存
let list = localStorage.searchRecord
if(list){
this.searchRecord = JSON.parse(list)
}
},
watch:{
kw(val){
if(val.length == 0){
this.activeIndex = -1
}
}
},
methods:{
down(){
if(this.activeIndex == this.searchRecord.length-1){
return
}
this.activeIndex++
},
up(){
if(this.activeIndex<=0){
return
}
this.activeIndex--
},
handleFocus(){ //获取焦点时
if(this.searchRecord != ''){
this.isSearch = true
}else{
this.isSearch = false
}
},
handleBlur(){ //失去焦点时
this.isSearch = false
this.activeIndex = -1
},
search(){ //搜索
if(this.activeIndex>-1){
this.kw = this.searchRecord[this.activeIndex]
}
this.isSearch = false

this.isHide = true
this.instance()

if(!this.searchRecord.includes(this.kw.trim())){ //判断重复搜索记录
this.searchRecord.push(this.kw)
this.save()
}

},
instance(){ //封装axios
this.$axios.get('http://api.kudesoft.cn/news/list',{
params:{
kw:this.kw,
page:this.page
}
}).then(res=>{
console.log(res.data.result.data)
let list = res.data.result.data

if(list == undefined){
this.load = '没有更多数据了！'
return
}else{
this.load = '正在加载...'
}

if(this.page<=1){
this.newsList = list
this.isShow = true
this.isHide = false
}else{
this.newsList = [...this.newsList,...list]
this.isShow = true
this.isHide = false
}

})
},
getMore(){ //加载更多
this.page++
this.isShow = false
this.isHide = true
this.instance()
},
save(){ //本地保存
localStorage.searchRecord = JSON.stringify(this.searchRecord)
}
}
}
</script>

<style scoped>
.search-list{
width: 163px;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
background-color: white;
margin-top: -1px;
}
.active{
background-color: lightgray;
}
.news-top{
position: fixed;
top: 0;
left: 0;
}
</style>

子组件：

<template>
<div class="news-dbox">

<div>
{{title}}
</div>

<div class="news-img">
<img v-for="(item,index) in imageUrls" :src="item" v-show="index<3" width="115px" height="100px">
</div>

<div class="news-bot">
<span>{{posterScreenName}}</span>
<span>评论</span>
<span>{{publishDate | TimeFilter}}</span>
</div>

</div>
</template>

<script>
export default{
props:{
title:String, //标题
imageUrls:Array, //图片
publishDate:Number, //发布日期时间戳
posterScreenName:String //发布者名称
},
filters: {
TimeFilter(time) {
let oldDate = new Date(time*1000)
let newDate = new Date()
var dayNum = "";
var getTime = (newDate.getTime() - oldDate.getTime())/ 1000;

if (getTime < 60 * 5) {
dayNum = "刚刚";
} else if (getTime >= 60 * 5 && getTime < 60 * 60) {
dayNum = parseInt(getTime / 60) + "分钟前";
} else if (getTime >= 3600 && getTime < 3600 * 24) {
dayNum = parseInt(getTime / 3600) + "小时前";
} else if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30) {
dayNum = parseInt(getTime / 3600 / 24) + "天前";
} else if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12) {
dayNum = parseInt(getTime / 3600 / 24 / 30) + "个月前";
} else if (time >= 3600 * 24 * 30 * 12) {
dayNum = parseInt(getTime / 3600 / 24 / 30 / 12) + "年前";
}

return dayNum;
}
}
}
</script>

<style scoped="scoped">
.news-dbox{
width: 100%;
height: 175px;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 10px 0;
border-bottom: 1px solid lightgray;
}
.news-img{
display: flex;
justify-content: space-around;
}
.news-img img{
border-radius: 3px;
}
.news-bot span{
margin: 0 5px;
}
</style>

子组件：

<template>
<div class="news-dbox">

<div style="display: flex; flex-direction: column; justify-content: space-between;">
<div>{{title}}</div>

<div class="news-bot">
<span>{{posterScreenName}}</span>
<span>评论</span>
<span>{{publishDate | TimeFilter}}</span>
</div>
</div>

<div class="news-img">
<img :src="imageUrls[0]" width="130px" height="110px">
</div>

</div>
</template>

<script>
export default{
props:{
title:String, //标题
imageUrls:Array, //图片
publishDate:Number, //发布日期时间戳
posterScreenName:String //发布者名称
},
filters: {
TimeFilter(time) {
let oldDate = new Date(time*1000)
let newDate = new Date()
var dayNum = "";
var getTime = (newDate.getTime() - oldDate.getTime())/ 1000;

if (getTime < 60 * 5) {
dayNum = "刚刚";
} else if (getTime >= 60 * 5 && getTime < 60 * 60) {
dayNum = parseInt(getTime / 60) + "分钟前";
} else if (getTime >= 3600 && getTime < 3600 * 24) {
dayNum = parseInt(getTime / 3600) + "小时前";
} else if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30) {
dayNum = parseInt(getTime / 3600 / 24) + "天前";
} else if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12) {
dayNum = parseInt(getTime / 3600 / 24 / 30) + "个月前";
} else if (time >= 3600 * 24 * 30 * 12) {
dayNum = parseInt(getTime / 3600 / 24 / 30 / 12) + "年前";
}

return dayNum;
}
}
}
</script>

<style scoped="scoped">
.news-dbox{
width: 100%;
height: 120px;
display: flex;
justify-content: space-around;
margin: 10px 0;
border-bottom: 1px solid lightgray;
}

.news-img img{
border-radius: 3px;
}
.news-bot span{
margin: 0 5px;
}
</style>