【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点页优化2接下来我们来优化沸点内容图片大小问题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

前言

大家好，上次分享中我们对沸点首页的内容进行了优化，实现了点击圈子跳转到对应圈子页面功能，还实现了沸点内容的下拉刷新和滚动翻页功能。今天的分享中我们继续来对沸点内容进行优化。上次分析到：如果沸点内容或热评内容过长则会显示一大坨很不好看，另外如果沸点中有图片，图片也会大小不均，接下来我们就对这两点进行优化。

当沸点内容过长时应该折叠，点击展开后再显示全部内容，而现在是所有内容都展示出了
沸点图片固定大小，点击后放大

沸点内容的展开与收起

当沸点内容过长时会则会被截断只显示一部分内容，并且在内容下面显示一个“展示”按钮，点击展开后显示全部沸点内容，同时在内容下方显示一个“收起”按钮。刚开始实现该功能时以为是通过直接操作dom来控制沸点内容盒子的高度进而实现内容的展示与收起功能，但真正动起手来实现时发现并不能达到预期。后来仔细想了想vue的最大特点就是数据响应式，避免直接操作dom。那么我们就应该好好利用一下这个特点。解决方案如下：

在前端遍历后端接口返回给我们的数据，给msg_info中的每个对象分别添加两个属性：show_content和sub_content，分别用于存储页面显示的内容和截断的内容
将沸点内容的原始内容content的长度，如果长度超过某个值比如120，就把content的内容截取120个长度并赋值给sub_content和show_content。
在模板中通过绑定show_content来显示沸点内容，默认如果超过120则显示截断的内容，并显示“展开”按钮（根据content和show_content长度判断）
当点击展开按钮时，将对应沸点对象的content值赋值给show_content
当点击收起按钮时，将对应沸点对象的sub_content值赋值给show_content
热评内容也是同理，这样就利用vue响应式的特点实现了内容的展示与收起功能核心代码及效果如下：

<div
    class="limit-btn"
    v-if="
      msg.msg_Info.content.length >= 80 &&
      msg.msg_Info.show_content.length <= 83
    "
    @click="showFullContent(msg.msg_Info.msg_id)"
  >
    展开
  </div>
  <div
    class="limit-btn"
    v-if="
      msg.msg_Info.content.length >= 80 &&
      msg.msg_Info.show_content.length > 83
    "
    @click="hideFullContent(msg.msg_Info.msg_id)"
  >
    收起
  </div>

res.data.forEach((item) => {
    item.msg_Info.sub_content = item.msg_Info.content.substring(0, 80);
    item.msg_Info.content.length >= 80
      ? (item.msg_Info.sub_content += "...")
      : null;
    item.msg_Info.show_content = item.msg_Info.sub_content;

   // hot_comment 处理方式与上面一样
  });
  
  const showFullContent = function (msg_id) {
      let arrPin = state.pinList.filter((item) => {
        if (item.msg_Info.msg_id === msg_id) {
          return item;
        }
        // console.log(item.msg_Info);
      });
      arrPin.length
        ? (arrPin[0].msg_Info.show_content = arrPin[0].msg_Info.content)
        : null;
    };
    const hideFullContent = function (msg_id) {
      let arrPin = state.pinList.filter((item) => {
        if (item.msg_Info.msg_id === msg_id) {
          return item;
        }
        // console.log(item.msg_Info);
      });
      arrPin.length
        ? (arrPin[0].msg_Info.show_content = arrPin[0].msg_Info.sub_content)
        : null;
    };

    const showFullHotContent = function (msg_id) {
      // ...
    };

    const hideFullHotContent = function (msg_id) {
      // ...
    };

图片放大与缩小

接下来我们来优化沸点内容图片大小问题，不同人发布的沸点图片大小都不一样，如果我们不会图片大小加以控制的话，图片显示出啦有大有小，那么页面整体看上去也不会好看，因此我们再展示图片时先默认设置一个大小，但点击图片时再显示放大后的图片。大概的实现思路如下：

定义两个响应式属性img_url和showImg分别用于保存当前点击图片的url和是否显示放大图片
给图片组件van-image设置一个固定的宽和高如200x200
给图片添加一个click事件，在该click事件中将当前图片的地址传递给绑定的方法showImage
在该方法showImage中将接收的到参数（图片的地址）赋值给img_url，同时将showImg属性设为true
在模板中再添加一个额外的van-image组件，并设置position属性为fixed用于显示放大后的图片
给放大图片的van-image也添加一个click事件，并在该事件中将showImg值设为false，用于将大图片隐藏代码及效果如下：

 <van-image
  :src="pic"
  v-for="(pic, $index) in msg.msg_Info.pic_list"
  :key="$index"
  class="image"
  @click="showImage(pic)"
/>


<div class="actual-img" :class="{ show: showImg }" @click="hideImage">
    <van-image :src="img_url" />
</div>

const showImage = function (img_url) {
  state.showImg = true;
  state.img_url = img_url;
};

const hideImage = function () {
  state.showImg = false;
};

总结

本次分享中我们又优化了沸点页中的两点内容，后面我们将继续实现沸点页中一些新的功能，比如查看更多评论内容，分享点赞等等。本次的分享就先到这里啦！