Construir un lector de libros electrónicos con Vue.js

Introducción

En este proyecto, aprenderás cómo construir un simple lector de libros electrónicos utilizando Vue 2.x. El lector de libros electrónicos permitirá a los usuarios alternar la visibilidad de la barra de herramientas del encabezado, establecer el tema de lectura y ajustar el tamaño de fuente del contenido de texto.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar la alternancia de la visibilidad de la barra de herramientas del encabezado
• Cómo implementar la configuración del tema de lectura
• Cómo implementar la configuración del tamaño de fuente

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar Vue.js para crear interfaces de usuario interactivas
• Manejar interacciones de usuario y actualizar la interfaz de usuario en consecuencia
• Dar estilo dinámicamente a los elementos según las preferencias del usuario
• Asegurarte de que la aplicación siga siendo receptiva y accesible

Implementar la alternancia de la visibilidad de la barra de herramientas del encabezado

Para comenzar, observa la estructura de directorios de los archivos a la izquierda, que es la siguiente:

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

Donde:

• index.html es la página principal y el siguiente archivo que necesitas modificar.
• css es la carpeta para los archivos de estilo.
• js/vue.js es el archivo de Vue 2.x.

A continuación, realizarás todo en el archivo index.html.

En este paso, aprenderás cómo implementar la alternancia de la visibilidad de la barra de herramientas del encabezado. Sigue los pasos a continuación para completar este paso:

1. Abre el archivo index.html, define la variable isShowTools en data bajo el: "#app" para controlar la visualización de la barra de herramientas del encabezado, con un valor predeterminado de true para mostrar la barra de herramientas del encabezado.

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

2. Envuelve el contenido de la barra de herramientas del encabezado (el elemento <div class="header">) en un elemento <transition> con la directiva v-if, vinculándolo a la propiedad de datos isShowTools. Esto asegurará que la barra de herramientas del encabezado solo sea visible cuando isShowTools sea true.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- contenido de la barra de herramientas del encabezado -->
  </div>
</transition>

3. En el archivo index.html, localiza el elemento <a> con la clase iconfont icon-setting. Este elemento se utiliza para alternar la visibilidad de la barra de herramientas del encabezado.
4. Agrega una directiva @click al elemento <a> y vincúlala a un método showTools en la instancia de Vue. Este método alternará la propiedad de datos isShowTools, que controla la visibilidad de la barra de herramientas del encabezado.

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

5. En la instancia de Vue, agrega el método showTools al objeto methods. Este método debe alternar el valor de la propiedad de datos isShowTools.

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

6. Agrega un icono close a la barra de herramientas del encabezado y vincula una directiva @click al método showTools para permitir al usuario cerrar la barra de herramientas del encabezado.

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

Implementar la configuración del tema de lectura

En este paso, aprenderás cómo implementar la configuración del tema de lectura. Sigue los pasos a continuación para completar este paso:

1. Define la variable isActiveColor en los datos bajo el: "#app" y establece el valor predeterminado en 0, es decir, el color de fondo predeterminado es el primer color seleccionado. En el archivo index.html, localiza el elemento <div class="right" id="setBG">. Aquí es donde se mostrarán los bloques de color circulares para el tema de lectura.

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

2. Utiliza una directiva v-for para recorrer la propiedad de datos bgList, que contiene la lista de colores de tema. Para cada color, crea un elemento <a> con una directiva @click que llame al método changeColor, pasando el índice actual como argumento.

<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>

3. En la instancia de Vue, agrega el método changeColor al objeto methods. Este método debe actualizar la propiedad de datos isActiveColor con el índice del bloque de color seleccionado.

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

4. En el elemento <p> con la clase text-content, utiliza la directiva :style para establecer dinámicamente el color de fondo y el color de fuente según el color de tema seleccionado.

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

Implementar la configuración del tamaño de fuente

En este paso, aprenderás cómo implementar la configuración del tamaño de fuente. Sigue los pasos a continuación para completar este paso:

1. Define la variable "fontSize" en los datos bajo el: "#app" y establece el valor predeterminado en "18". En el archivo index.html, localiza el elemento <div class="set-font">. Aquí es donde se mostrarán los controles de tamaño de fuente.

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

2. Localiza <span class="lang">18</span> y cambia el 18 por la variable fontSize.

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

3. Agrega directivas @click a los botones "A-" y "A+", vinculándolos al método updateFontSize en la instancia de Vue. Pasa un valor booleano para indicar si el tamaño de fuente debe aumentar o disminuir.

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

4. En la instancia de Vue, agrega el método updateFontSize al objeto methods. Este método debe actualizar la propiedad de datos fontSize, asegurando que el tamaño de fuente se mantenga dentro del rango de 12px a 48px.

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

5. En el elemento <p> con la clase text-content, utiliza la directiva :style para establecer dinámicamente el tamaño de fuente y la altura de línea según la propiedad de datos fontSize.

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

Al seguir estos pasos, has completado la implementación de las características del lector de libros electrónicos, incluyendo la alternancia de la visibilidad de la barra de herramientas del encabezado, la configuración del tema de lectura y la configuración del tamaño de fuente.

A continuación, haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto. Abre "Web 8080" en la parte superior de la máquina virtual y actualízalo manualmente y verás la página.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.