Vue.js卡片式阅读进度条组件开发指南

应用场景

该组件适用于构建基于Vue.js的电子书阅读器或类似应用，用于直观展示用户当前的阅读进度。

基本功能

• 展示书籍章节进度条，可自定义进度条颜色和长度。
• 提供书籍封面、章节信息、阅读时间等信息展示。
• 支持多本图书同时展示，并可通过底部标签页切换。

功能实现步骤及关键代码分析

1. 搭建页面结构

使用Vue.js的单文件组件搭建页面结构，包含顶部用户信息栏、卡片式阅读进度条和底部标签页。

<template>
  <div class="bg-gray-100 h-screen">
    <div class="flex justify-between items-center px-4 py-2 border-b border-gray-200">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full" src="..." alt="avatar" />
        <div class="ml-2">
          <p class="text-sm font-semibold">用户名</p>
          <p class="text-xs text-gray-500">等级</p>
        </div>
      </div>
      <div>
        <i class="iconfont icon-download text-2xl"></i>
        <i class="iconfont icon-more text-2xl ml-4"></i>
      </div>
    </div>
    <div class="flex flex-col items-center justify-center h-full">
      <div class="w-full max-w-sm">
        ...
      </div>
    </div>
    <van-tabbar v-model="active" :active-color="'#409EFF'" :inactive-color="'#999999'">
      ...
    </van-tabbar>
  </div>
</template>

2. 渲染卡片式阅读进度条

在w-full max-w-sm容器中渲染卡片式阅读进度条，包含书籍封面、章节信息、进度条和进度百分比。

<div class="bg-blue-100 p-4 rounded-lg">
  <div class="flex items-center">
    <img class="w-16 h-16 rounded-full" src="..." alt="cover" />
    <div class="ml-4">
      <p class="text-sm font-semibold">章节名称 / 总章节数</p>
      <div class="text-xs text-gray-500">阅读时间</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="text-sm font-semibold">80.6%</div>
    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
      <div class="bg-blue-500 rounded-full h-2" style="width: 80.6%"></div>
    </div>
  </div>
</div>

3. 计算进度百分比

在setup函数中计算当前章节进度百分比，并使用v-model绑定到进度条的style属性。

const active = ref(0);
const progress = ref(80.6);

4. 切换书籍

通过底部标签页切换不同书籍的阅读进度条，并更新active和progress值。

<van-tabbar v-model="active" :active-color="'#409EFF'" :inactive-color="'#999999'">
  <van-tabbar-item icon="iconfont icon-bookshelf" to="/bookshelf">书架</van-tabbar-item>
  <van-tabbar-item icon="iconfont icon-explore">发现</van-tabbar-item>
  <van-tabbar-item icon="iconfont icon-me">我的</van-tabbar-item>
</van-tabbar>

总结与展望

开发经验与收获：

• 掌握了Vue.js单文件组件开发流程。
• 了解了如何使用v-model绑定数据到样式属性。
• 理解了如何通过标签页切换不同内容。

未来功能拓展与优化：

• 支持自定义进度条样式和颜色。
• 添加章节目录功能，方便用户跳转章节。
• 集成阅读记录功能，自动记录用户阅读进度。