使用 Vue 2.x 构建电子书阅读器 | 交互式界面 | 响应式设计

简介

在这个项目中，你将学习如何使用 Vue 2.x 构建一个简单的电子书阅读器。该电子书阅读器将允许用户切换头部工具栏的可见性、设置阅读主题以及调整文本内容的字体大小。

👀 预览

🎯 任务

在这个项目中，你将学习：

如何实现头部工具栏可见性的切换
如何实现阅读主题的设置
如何实现字体大小的设置

🏆 成果

完成这个项目后，你将能够：

使用 Vue.js 创建交互式用户界面
处理用户交互并相应地更新 UI
根据用户偏好动态设置元素样式
确保应用程序保持响应式且易于访问

实现头部工具栏可见性的切换

首先，查看左侧文件的目录结构如下：

├── index.html
├── css
└── js
    └── vue.js

其中：

index.html 是主页，也是你接下来需要修改的文件。
css 是样式文件的文件夹。
js/vue.js 是 Vue 2.x 文件。

接下来你在 index.html 文件中进行所有操作。

在这一步中，你将学习如何实现头部工具栏可见性的切换。按照以下步骤完成此步骤：

打开 index.html 文件，在 el: "#app" 下的 data 中定义变量 isShowTools 来控制头部工具栏的显示，默认值为 true 以显示头部工具栏。

data: {
  isShowTools: true,
  //...
}

使用 v-if 指令将头部工具栏内容（<div class="header"> 元素）包裹在一个 <transition> 元素中，并将其绑定到 isShowTools 数据属性。这将确保只有当 isShowTools 为 true 时头部工具栏才可见。

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- 头部工具栏内容 -->
  </div>
</transition>

在 index.html 文件中，找到类名为 iconfont icon-setting 的 <a> 元素。此元素用于切换头部工具栏的可见性。
给 <a> 元素添加一个 @click 指令，并将其绑定到 Vue 实例中的 showTools 方法。此方法将切换控制头部工具栏可见性的 isShowTools 数据属性。

<a @click="showTools" class="iconfont icon-setting"></a>

在 Vue 实例中，将 showTools 方法添加到 methods 对象中。此方法应切换 isShowTools 数据属性的值。

methods: {
  showTools() {
    this.isShowTools =!this.isShowTools;
  },
}

在头部工具栏中添加一个“关闭”图标，并给它的 @click 指令绑定 showTools 方法，以便用户可以关闭头部工具栏。

<li class="container">
  <a @click="showTools" class="iconfont icon-close"></a>
</li>

实现阅读主题的设置

在这一步中，你将学习如何实现阅读主题的设置。按照以下步骤完成此步骤：

在 el: "#app" 下的 data 中定义变量 isActiveColor，并将默认值设置为 0，即默认背景颜色是第一个选中的颜色。在 index.html 文件中，找到 <div class="right" id="setBG"> 元素。这是将显示阅读主题的圆形颜色块的地方。

data: {
  isActiveColor: 0,
  //...
}

使用 v-for 指令遍历 bgList 数据属性，其中包含主题颜色列表。对于每种颜色，创建一个带有 @click 指令的 <a> 元素，该指令调用 changeColor 方法，并将当前索引作为参数传递。

<div class="right" id="setBG">
  <a
    @click="changeColor(index)"
    v-for="(item,index) in bgList"
    :style="{'background-color':item}"
    :class="{'iconfont':true,'icon-selected':index==isActiveColor}"
  ></a>
</div>

在 Vue 实例中，将 changeColor 方法添加到 methods 对象中。此方法应使用所选颜色块的索引更新 isActiveColor 数据属性。

methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}

在类名为 text-content 的 <p> 元素中，使用 :style 指令根据所选主题颜色动态设置背景颜色和字体颜色。

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333'
  }"
>
  <!-- 内容 -->
</p>

实现字体大小的设置

在这一步中，你将学习如何实现字体大小的设置。按照以下步骤完成此步骤：

在 el: "#app" 下的 data 中定义变量“fontSize”，并将默认值设置为“18”。在 index.html 文件中，找到 <div class="set-font"> 元素。这是将显示字体大小控件的地方。

data: {
  fontSize: 18,
  //...
}

找到 <span class="lang">18</span>，并将 18 替换为 fontSize 变量。

<span class="lang">{{ fontSize }}</span>

给“A-”和“A+”按钮添加 @click 指令，将它们绑定到 Vue 实例中的 updateFontSize 方法。传递一个布尔值以指示字体大小应该增大还是减小。

<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>

在 Vue 实例中，将 updateFontSize 方法添加到 methods 对象中。此方法应更新 fontSize 数据属性，确保字体大小保持在 12px 到 48px 的范围内。

methods: {
  updateFontSize(flag) {
    if (flag) {
      if (this.fontSize < 48) {
        this.fontSize += 2;
      }
    } else {
      if (this.fontSize > 12) {
        this.fontSize -= 2;
      }
    }
  }
}

在类名为 text-content 的 <p> 元素中，使用 :style 指令根据 fontSize 数据属性动态设置字体大小和行高。

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333',
    'font-size': `${fontSize}px`,
    'line-height': `${fontSize + 10}px`
  }"
>
  <!-- 内容 -->
</p>

通过遵循这些步骤，你已经完成了电子书阅读器功能的实现，包括头部工具栏可见性的切换、阅读主题的设置以及字体大小的设置。

接下来，点击 WebIDE 右下角的 Go Live 按钮来运行项目。在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。