Construa um Leitor de E-books com Vue.js

Introdução

Neste projeto, você aprenderá como construir um leitor de e-books simples usando Vue 2.x. O leitor de e-books permitirá que os usuários alternem a visibilidade da barra de ferramentas do cabeçalho, definam o tema de leitura e ajustem o tamanho da fonte do conteúdo do texto.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como implementar a alternância da visibilidade da barra de ferramentas do cabeçalho
• Como implementar a configuração do tema de leitura
• Como implementar a configuração do tamanho da fonte

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar Vue.js para criar interfaces de usuário interativas
• Lidar com interações do usuário e atualizar a interface do usuário (UI) de acordo
• Estilizar dinamicamente elementos com base nas preferências do usuário
• Garantir que o aplicativo permaneça responsivo e acessível

Implementar a Alternância da Visibilidade da Barra de Ferramentas do Cabeçalho

Para começar, observe a estrutura de diretórios dos arquivos à esquerda, conforme segue:

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

Onde:

• index.html é a página principal e o próximo arquivo que você precisa modificar.
• css é a pasta para arquivos de estilo.
• js/vue.js é o arquivo Vue 2.x.

Em seguida, você faz tudo no arquivo index.html.

Nesta etapa, você aprenderá como implementar a alternância da visibilidade da barra de ferramentas do cabeçalho. Siga as etapas abaixo para concluir esta etapa:

1. Abra o arquivo index.html, defina a variável isShowTools em data sob el: "#app" para controlar a exibição da barra de ferramentas do cabeçalho, com um valor padrão de true para mostrar a barra de ferramentas do cabeçalho.

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

2. Envolva o conteúdo da barra de ferramentas do cabeçalho (o elemento <div class="header">) em um elemento <transition> com a diretiva v-if, vinculando-o à propriedade de dados isShowTools. Isso garantirá que a barra de ferramentas do cabeçalho seja visível apenas quando isShowTools for true.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- header toolbar content -->
  </div>
</transition>

3. No arquivo index.html, localize o elemento <a> com a classe iconfont icon-setting. Este elemento é usado para alternar a visibilidade da barra de ferramentas do cabeçalho.
4. Adicione uma diretiva @click ao elemento <a> e vincule-a a um método showTools na instância Vue. Este método alternará a propriedade de dados isShowTools, que controla a visibilidade da barra de ferramentas do cabeçalho.

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

5. Na instância Vue, adicione o método showTools ao objeto methods. Este método deve alternar o valor da propriedade de dados isShowTools.

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

6. Adicione um ícone close à barra de ferramentas do cabeçalho e vincule uma diretiva @click ao método showTools para permitir que o usuário feche a barra de ferramentas do cabeçalho.

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

Implementar a Definição do Tema de Leitura

Nesta etapa, você aprenderá como implementar a configuração do tema de leitura. Siga as etapas abaixo para concluir esta etapa:

1. Defina a variável isActiveColor em data sob el: "#app" e defina o valor padrão como 0, ou seja, a cor de fundo padrão é a primeira cor selecionada. No arquivo index.html, localize o elemento <div class="right" id="setBG">. É aqui que os blocos de cores circulares para o tema de leitura serão exibidos.

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

2. Use uma diretiva v-for para iterar sobre a propriedade de dados bgList, que contém a lista de cores do tema. Para cada cor, crie um elemento <a> com uma diretiva @click que chama o método changeColor, passando o índice atual como um 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. Na instância Vue, adicione o método changeColor ao objeto methods. Este método deve atualizar a propriedade de dados isActiveColor com o índice do bloco de cores selecionado.

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

4. No elemento <p> com a classe text-content, use a diretiva :style para definir dinamicamente a cor de fundo e a cor da fonte com base na cor do tema selecionado.

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

Implementar a Definição do Tamanho da Fonte

Nesta etapa, você aprenderá como implementar a configuração do tamanho da fonte. Siga as etapas abaixo para concluir esta etapa:

1. Defina a variável "fontSize" em data sob el: "#app" e defina o valor padrão como "18". No arquivo index.html, localize o elemento <div class="set-font">. É aqui que os controles de tamanho da fonte serão exibidos.

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

2. Localize <span class="lang">18</span> e altere 18 para a variável fontSize.

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

3. Adicione diretivas @click aos botões "A-" e "A+", vinculando-as ao método updateFontSize na instância Vue. Passe um valor booleano para indicar se o tamanho da fonte deve ser aumentado ou diminuído.

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

4. Na instância Vue, adicione o método updateFontSize ao objeto methods. Este método deve atualizar a propriedade de dados fontSize, garantindo que o tamanho da fonte permaneça dentro da faixa 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. No elemento <p> com a classe text-content, use a diretiva :style para definir dinamicamente o tamanho da fonte e a altura da linha com base na propriedade de dados fontSize.

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

Seguindo estas etapas, você concluiu a implementação dos recursos do leitor de e-books, incluindo a alternância da visibilidade da barra de ferramentas do cabeçalho, a configuração do tema de leitura e a configuração do tamanho da fonte.

Em seguida, clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.