Создание электронного читалки на Vue.js

Введение

В этом проекте вы научитесь создавать простой электронный читалку с использованием Vue 2.x. Электронный читалка позволит пользователям переключать видимость верхней панели инструментов, настраивать тему чтения и изменять размер шрифта текстового содержимого.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• Реализовывать переключение видимости верхней панели инструментов
• Настраивать тему чтения
• Настраивать размер шрифта

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать Vue.js для создания интерактивных пользовательских интерфейсов
• Обрабатывать пользовательские взаимодействия и соответствующим образом обновлять пользовательский интерфейс
• Динамически стилизовать элементы в соответствии с предпочтениями пользователя
• Гарантировать, чтобы приложение оставалось отзывчивым и доступным

Skills Graph

Реализация переключения видимости верхней панели инструментов

Для начала, посмотрите на структуру каталогов файлов слева:

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

Где:

• index.html - это главная страница, и это следующий файл, который вам нужно изменить.
• css - это папка для файлов стилей.
• js/vue.js - это файл Vue 2.x.

Далее вы будете работать в файле index.html.

На этом этапе вы научитесь реализовывать переключение видимости верхней панели инструментов. Следуйте шагам ниже, чтобы выполнить этот этап:

1. Откройте файл index.html, определите переменную isShowTools в объекте data под el: "#app" для управления отображением верхней панели инструментов. Значение по умолчанию - true, чтобы панель инструментов была видна.

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

2. Оберните содержимое верхней панели инструментов (элемент <div class="header">) в элемент <transition> с директивой v-if, привязав его к свойству данных isShowTools. Это обеспечит отображение верхней панели инструментов только при значении isShowTools равном true.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- содержимое верхней панели инструментов -->
  </div>
</transition>

3. В файле index.html найдите элемент <a> с классами iconfont icon-setting. Этот элемент используется для переключения видимости верхней панели инструментов.
4. Добавьте директиву @click к элементу <a> и привяжите ее к методу showTools в экземпляре Vue. Этот метод будет переключать значение свойства данных isShowTools, которое управляет видимостью верхней панели инструментов.

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

5. В экземпляре Vue добавьте метод showTools в объект methods. Этот метод должен переключать значение свойства данных isShowTools.

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

6. Добавьте значок "закрыть" на верхнюю панель инструментов и привяжите директиву @click к методу showTools, чтобы пользователь мог закрыть панель инструментов.

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

Реализация настройки темы чтения

На этом этапе вы научитесь реализовывать настройку темы чтения. Следуйте шагам ниже, чтобы выполнить этот этап:

1. Определите переменную isActiveColor в объекте data под el: "#app" и установите значение по умолчанию равным 0, то есть цвет фона по умолчанию - это первый выбранный цвет. В файле index.html найдите элемент <div class="right" id="setBG">. Здесь будут отображаться круглые цветные блоки для темы чтения.

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

2. Используйте директиву v-for для перебора свойства данных bgList, которое содержит список цветов темы. Для каждого цвета создайте элемент <a> с директивой @click, которая вызывает метод 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>

3. В экземпляре Vue добавьте метод changeColor в объект methods. Этот метод должен обновить свойство данных isActiveColor индексом выбранного цветного блока.

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

4. В элементе <p> с классом text-content используйте директиву :style для динамического установки цвета фона и цвета шрифта в зависимости от выбранного цвета темы.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4? '#ffffff' : '#333333'
  }"
>
  <!-- содержимое -->
</p>

Реализация настройки размера шрифта

На этом этапе вы научитесь реализовывать настройку размера шрифта. Следуйте шагам ниже, чтобы выполнить этот этап:

1. Определите переменную "fontSize" в объекте data под el: "#app" и установите значение по умолчанию равным "18". В файле index.html найдите элемент <div class="set-font">. Здесь будут отображаться элементы управления размером шрифта.

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

2. Найдите <span class="lang">18</span> и замените 18 на переменную fontSize.

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

3. Добавьте директивы @click к кнопкам "A-" и "A+", привязав их к методу updateFontSize в экземпляре Vue. Передайте логическое значение, чтобы указать, нужно ли увеличить или уменьшить размер шрифта.

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

4. В экземпляре 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;
      }
    }
  }
}

5. В элементе <p> с классом text-content используйте директиву :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>

Следуя этим шагам, вы завершили реализацию функций электронного читалки, включая переключение видимости верхней панели инструментов, настройку темы чтения и настройку размера шрифта.

Далее нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект. Откройте "Web 8080" в верхней части виртуальной машины и вручную обновите страницу, и вы увидите ее.

Итог

Поздравляем! Вы завершили этот проект. Вы можете попрактиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.