项目心得五

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);
    },