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

HTMLHTMLBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/text_dir -.-> lab-445765{{"Создание электронного читалки на Vue.js"}} html/layout -.-> lab-445765{{"Создание электронного читалки на Vue.js"}} html/forms -.-> lab-445765{{"Создание электронного читалки на Vue.js"}} html/inter_elems -.-> lab-445765{{"Создание электронного читалки на Vue.js"}} html/templating -.-> lab-445765{{"Создание электронного читалки на Vue.js"}} end

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

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

├── 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,
  //...
}
  1. Оберните содержимое верхней панели инструментов (элемент <div class="header">) в элемент <transition> с директивой v-if, привязав его к свойству данных isShowTools. Это обеспечит отображение верхней панели инструментов только при значении isShowTools равном true.
<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- содержимое верхней панели инструментов -->
  </div>
</transition>
  1. В файле index.html найдите элемент <a> с классами iconfont icon-setting. Этот элемент используется для переключения видимости верхней панели инструментов.
  2. Добавьте директиву @click к элементу <a> и привяжите ее к методу showTools в экземпляре Vue. Этот метод будет переключать значение свойства данных isShowTools, которое управляет видимостью верхней панели инструментов.
<a @click="showTools" class="iconfont icon-setting"></a>
  1. В экземпляре Vue добавьте метод showTools в объект methods. Этот метод должен переключать значение свойства данных isShowTools.
methods: {
  showTools() {
    this.isShowTools =!this.isShowTools;
  },
}
  1. Добавьте значок "закрыть" на верхнюю панель инструментов и привяжите директиву @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,
  //...
}
  1. Используйте директиву 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>
  1. В экземпляре Vue добавьте метод changeColor в объект methods. Этот метод должен обновить свойство данных isActiveColor индексом выбранного цветного блока.
methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}
  1. В элементе <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,
  //...
}
  1. Найдите <span class="lang">18</span> и замените 18 на переменную fontSize.
<span class="lang">{{ fontSize }}</span>
  1. Добавьте директивы @click к кнопкам "A-" и "A+", привязав их к методу updateFontSize в экземпляре Vue. Передайте логическое значение, чтобы указать, нужно ли увеличить или уменьшить размер шрифта.
<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>
  1. В экземпляре 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;
      }
    }
  }
}
  1. В элементе <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, чтобы улучшить свои навыки.