daily-article是知乎日报中最重要的内容板块:
单独列出来，作具体分析：
内容板块包括主题title，内容content,以及评论区comments
内容渲染主要通过watch监控id变化时触发getArticle函数渲染，使用来自util配置的ajax（引用了axios模块），
通过正则匹配对应src的内容替换res.body的src内容成图片路径，将数据返回给内容，回滚顶部，加载评论。
getArticle () {
$.ajax.get('news/' + this.id).then(res => {
//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
res.body = res.body
.replace(/src="http/g, 'src="' + $.imgPath + 'http');
res.body = res.body
.replace(/src="https/g, 'src="' + $.imgPath + 'https');
this.data = res;
window.scrollTo(0, 0);
this.getComments();
})
}
评论部分：
获取对应链接下的评论内容，之后将内容传递给本地的comments,将头像地址转为代理地址返回给comment；
getComments () {
this.comments = [];
$.ajax.get('story/' + this.id + '/short-comments').then(res => {
this.comments = res.comments.map(comment => {
// 将头像的图片地址转为代理地址
comment.avatar = $.imgPath + comment.avatar;
return comment;
});
})
}
关于directives（自定义组件）V-time下一章解析。
源码:
<template>
<div class="daily-article">
<div class="daily-article-title">{{ data.title }}</div>
<div class="daily-article-content" v-html="data.body"></div>
<div class="daily-comments" v-show="comments.length">
<span>评论（{{ comments.length }}）</span>
<div class="daily-comment" v-for="comment in comments" :key="comment.id">
<div class="daily-comment-avatar">
<img :src="comment.avatar">
</div>
<div class="daily-comment-content">
<div class="daily-comment-name">{{ comment.author }}</div>
<div class="daily-comment-time" v-time="comment.time"></div>
<div class="daily-comment-text">{{ comment.content }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Time from '../directives/time';
import $ from '../libs/util';
export default {
directives: { Time },
props: {
id: {
type: Number,
default: 0
}
},
data () {
return {
data: {},
comments: []
}
},
methods: {
getArticle () {
$.ajax.get('news/' + this.id).then(res => {
res.body = res.body
.replace(/src="http/g, 'src="' + $.imgPath + 'http');
res.body = res.body
.replace(/src="https/g, 'src="' + $.imgPath + 'https');
this.data = res;
window.scrollTo(0, 0);
this.getComments();
})
},
getComments () {
this.comments = [];
$.ajax.get('story/' + this.id + '/short-comments').then(res => {
this.comments = res.comments.map(comment => {
// 将头像的图片地址转为代理地址
comment.avatar = $.imgPath + comment.avatar;
return comment;
});
})
}
},
watch: {
id (val) {
if (val) this.getArticle();
}
}
};
</script>
