vue手机端项目-文章详情（未完成）

在 api/article.js 中新增封装接口方法

在组件article/index.vue中调用获取文章详情

展示文章详情

先处理标题、作者信息、文章正文显示这几个部分，其他留到稍后处理

处理内容加载状态

需求：

• 加载中，显示 loading
• 加载成功，显示文章详情
• 加载失败，显示错误提示
  • 如果 404，提示资源不存在
  • 其它的，提示加载失败，用户可以点击重试重新加载

 

 

处理正文样式

文章正文包括各种数据：段落、标题、列表、链接、图片、视频等资源。

• 将 github-markdown-css (opens new window)样式文件下载到项目中

  • 把 样式文件下载放在views/article/github-markdown.css

  • 在article/index.vue里面的style标签里面导入

 注：不介绍css怎么布局

 

给内容正文标签增加markdown-body样式类

.postcssrc.js中配置不要转换样式文件中的字号

 

 

图片点击预览

一、ImagePreview 图片预览 (opens new window)的使用

二、处理图片点击预览 （演示数据文章id： 135982 ）

思路：

1、从文章内容中获取到所有的 img DOM 节点

2、获取文章内容中所有的图片地址

3、遍历所有 img 节点，给每个节点注册点击事件

4、在 img 点击事件处理函数中，调用 ImagePreview 预览