В этом проекте вы научитесь создавать простой электронный читалку с использованием 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.
На этом этапе вы научитесь реализовывать переключение видимости верхней панели инструментов. Следуйте шагам ниже, чтобы выполнить этот этап:
Откройте файл index.html, определите переменную isShowTools в объекте data под el: "#app" для управления отображением верхней панели инструментов. Значение по умолчанию - true, чтобы панель инструментов была видна.
data: {
isShowTools: true,
//...
}
Оберните содержимое верхней панели инструментов (элемент <div class="header">) в элемент <transition> с директивой v-if, привязав его к свойству данных isShowTools. Это обеспечит отображение верхней панели инструментов только при значении isShowTools равном true.
В файле index.html найдите элемент <a> с классами iconfont icon-setting. Этот элемент используется для переключения видимости верхней панели инструментов.
Добавьте директиву @click к элементу <a> и привяжите ее к методу showTools в экземпляре Vue. Этот метод будет переключать значение свойства данных isShowTools, которое управляет видимостью верхней панели инструментов.
Добавьте значок "закрыть" на верхнюю панель инструментов и привяжите директиву @click к методу showTools, чтобы пользователь мог закрыть панель инструментов.
На этом этапе вы научитесь реализовывать настройку темы чтения. Следуйте шагам ниже, чтобы выполнить этот этап:
Определите переменную isActiveColor в объекте data под el: "#app" и установите значение по умолчанию равным 0, то есть цвет фона по умолчанию - это первый выбранный цвет. В файле index.html найдите элемент <div class="right" id="setBG">. Здесь будут отображаться круглые цветные блоки для темы чтения.
data: {
isActiveColor: 0,
//...
}
Используйте директиву v-for для перебора свойства данных bgList, которое содержит список цветов темы. Для каждого цвета создайте элемент <a> с директивой @click, которая вызывает метод changeColor, передавая текущий индекс в качестве аргумента.
В экземпляре Vue добавьте метод changeColor в объект methods. Этот метод должен обновить свойство данных isActiveColor индексом выбранного цветного блока.
В элементе <p> с классом text-content используйте директиву :style для динамического установки цвета фона и цвета шрифта в зависимости от выбранного цвета темы.
На этом этапе вы научитесь реализовывать настройку размера шрифта. Следуйте шагам ниже, чтобы выполнить этот этап:
Определите переменную "fontSize" в объекте data под el: "#app" и установите значение по умолчанию равным "18". В файле index.html найдите элемент <div class="set-font">. Здесь будут отображаться элементы управления размером шрифта.
data: {
fontSize: 18,
//...
}
Найдите <span class="lang">18</span> и замените 18 на переменную fontSize.
<span class="lang">{{ fontSize }}</span>
Добавьте директивы @click к кнопкам "A-" и "A+", привязав их к методу updateFontSize в экземпляре Vue. Передайте логическое значение, чтобы указать, нужно ли увеличить или уменьшить размер шрифта.
В экземпляре Vue добавьте метод updateFontSize в объект methods. Этот метод должен обновить свойство данных fontSize, обеспечивая, чтобы размер шрифта оставался в диапазоне от 12px до 48px.
В элементе <p> с классом text-content используйте директиву :style для динамического установки размера шрифта и межстрочного интервала на основе свойства данных fontSize.
Следуя этим шагам, вы завершили реализацию функций электронного читалки, включая переключение видимости верхней панели инструментов, настройку темы чтения и настройку размера шрифта.
Далее нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект. Откройте "Web 8080" в верхней части виртуальной машины и вручную обновите страницу, и вы увидите ее.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy