vant组件cell,to属性配置路由跳转:
<!--
Cell 单元格的 to 属性和 VueRouter 中的 RouterLink 导航组件的 to 属性用法是一样的
用法参考链接:https://router.vuejs.org/zh/api/#to
:to="'/article/' + article.art_id"
:to="`/article/${article.art_id}`"
:to="{ name:'路径名称', params:{ 标识符:数据 } }"
-->
<van-cell
class="article-item"
:to="{ name: 'article', params: { articleId: article.art_id} }"
>
动态路径参数的解耦:
{
path: "/search",
name: "search",
component: () => import("@/views/search"), //懒加载的方式导入路由
},
{
path: "/article/:articleId",
name: "article",
component: () => import("@/views/article"), //懒加载的方式导入路由
props: true, //动态路径参数的解耦:将动态路径的参数映射到对应组件的props属性中
},
--------------------------------------------------------------------------------
//对应组件中
props: {
// 使用props获取动态路由的数据,接收路由映射过来的动态参数
// 使用props解耦获得了的动态路由数据,这样我们就可以使用this.articleId 获取动态路由数据 而
//不需要使用 this.$route.params.articleId,增加了组件的可复用性
articleId: {
type: [Number, String],
required: true,
},
},
处理内容加载状态:
- 加载中,显示 loading
- 加载成功,显示文章详情
- 加载失败,显示错误提示
- 如果 404,提示资源不存在
- 其它的,提示加载失败,用户可以点击重试重新加载
// data定义变量
loading: true, // 加载中的 loading 状态
errStatus: 0 // 失败的状态码
async loadArticleDetail() {
this.lodaing = true;
try {
// 手动抛错
// if (Math.random() > 0.6) {
// throw new Error("错误");
// }
//手动抛错
const { data } = await getArticleDetail(this.articleId);
console.log(data);
data.data.content = data.data.content.replaceAll(
"https://images.weserv.nl/?url=",
""
);
this.article = data.data; //vue更新dom是异步的
// 不使用定时器可以使用nextTick这个api方法
/*
this.loading = false
this.$nextTick(()=>{
this.previewImage()
})
*/
setTimeout(() => {
// 数据更新之后,调用图片预览
this.previewImage();
console.log(this.$refs["article-content"]);
}, 0);
} catch (err) {
if (err.response && err.response.status === 404) {
this.$toast("访问的文章信息不存在!");
this.errStatus = 404;
} else {
this.$toast("获取文章详情失败!");
}
}
this.lodaing = false;
},
<!-- 加载中 -->
<div v-if="loading" class="loading-wrap"> ... </div>
<!-- /加载中 -->
<!-- 加载完成-文章详情 -->
<div v-else-if="article.title" class="article-detail"> ... </div>
<!-- /加载完成-文章详情 -->
<!-- 加载失败:404 -->
<div v-else-if="errStatus === 404" class="error-wrap"> ... </div>
<!-- /加载失败:404 -->
<!-- 加载失败:其它未知错误(例如网络原因或服务端异常) -->
<div v-else class="error-wrap">...</div>
<!-- /加载失败:其它未知错误(例如网络原因或服务端异常) -->
处理正文样式:github-markdown-css
下载样式文件,在style标签中引入:
<style scoped lang="less">
@import "./github-markdown.css";
给内容正文标签增加markdown-body
样式类:
<div
class="article-content markdown-body"
ref="article-content"
v-html="article.content"
>
文章内容
</div>
配置不要转换文件中的字号:
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
"postcss-pxtorem": {
rootValue({ file }) {
return file.indexOf("vant") !== -1 ? 37.5 : 75;
},
propList: ["*"],
// 配置不要转换的样式资源
exclude: "github-markdown",
},
},
};
vant组件图片点击预览的使用:
previewImage() {
// 1、从文章内容中获取到所有的 img DOM 节点
const articleContent = this.$refs["article-content"];
const imgs = articleContent.querySelectorAll("img");
// 2、获取文章内容中所有的图片地址
const images = [];
// 3、遍历所有 img 节点,给每个节点注册点击事件
imgs.forEach((img, index) => {
images.push(img.src);
img.onclick = () => {
ImagePreview({
images: images,
startPosition: index,
});
};
});
// 4、在 img 点击事件处理函数中,调用 ImagePreview 预览
console.log(images);
},