Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим несколько хороших библиотек анимации, которые позволят нам что-то показать, когда мы загружаем данные в наше приложение Vue.
Путь прогресса Vue
Пакет Vue Progress Path позволяет нам отображать индикатор выполнения с различными формами без особых проблем.
Он доступен как пакет Node. Мы можем добавить это следующим образом:
npm i --save vue-progress-path
Тогда мы можем использовать его следующим образом:
main.js
import Vue from "vue"; import App from "./App.vue"; import "vue-progress-path/dist/vue-progress-path.css"; import VueProgress from "vue-progress-path"; Vue.use(VueProgress, { defaultShape: "circle" }); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
<template> <div id="app"> <loading-progress :progress="progress" :indeterminate="indeterminate" :counter-clockwise="true" :hide-background="false" shape="semicircle" size="64" /> <button @click="progress++">next</button> <button @click="indeterminate = !indeterminate">indeterminate</button> </div> </template> <script> export default { name: "App", data() { return { progress: 0, indeterminate: false }; } }; </script>
В приведенном выше коде у нас есть компонент loading-progress
, который импортируется из компонента vue-progress-path
.
Мы зарегистрировали плагин, вызвав метод Vue.use
.
Затем в App.vue
мы использовали компонент loading-progress
с различными параметрами.
Параметр progress
- это число, обозначающее достигнутый прогресс, и оно отображается на индикаторе выполнения в виде заполненного индикатора выполнения.
indeterminate
- логическое значение, указывающее, что индикатор выполнения работает вечно.
counter-clockwise
- это логическое значение, которое указывает, показывает ли индикатор выполнения цвет хода выполнения, движущийся против часовой стрелки.
hide-background
- это логическое значение, указывающее, хотим ли мы скрыть фон фонового изображения.
shape
- строка для обозначения формы. size
- размер индикатора выполнения в пикселях.
Теперь, когда мы нажимаем «Далее», мы видим, что зеленая часть индикатора выполнения включается и выключается.
Если мы щелкнем по неопределенному, мы увидим, как зеленая полоса загорается и исчезает.
Кнопка загрузки Vue
Пакет кнопки загрузки Vue представляет собой простую ширину, которая добавляет значок загрузки к кнопке.
Для его установки запускаем следующий код:
npm install --save vue-loading-button
Тогда мы можем использовать его следующим образом:
<template> <div id="app"> <VueLoadingButton :loading="loading" aria-label="button" @click.native="loading = !loading" >button</VueLoadingButton> </div> </template> <script> import VueLoadingButton from "vue-loading-button"; export default { name: "App", components: { VueLoadingButton }, data() { return { loading: false }; } }; </script>
В приведенном выше коде мы импортировали пакет vue-loading-button
в наш компонент, а затем зарегистрировали его в свойстве components
нашего объекта компонента.
Затем мы использовали его следующим образом:
<VueLoadingButton :loading="loading" aria-label="button" @click.native="loading = !loading" >button</VueLoadingButton>
Мы устанавливаем опору loading
в поле loading
, чтобы мы могли включать и выключать счетчик загрузки.
Затем у нас есть обработчик click.native
, чтобы мы могли запускать наш код обработчика событий щелчка при нажатии кнопки.
Теперь, когда мы нажимаем на кнопку, мы видим, что счетчик загрузки включается и выключается.
Мы также можем добавить свойство styled
, которое является логическим, чтобы указать, хотим ли мы включить его встроенные стили.
Скелет туберкулеза
Пакет TB Skeleton позволяет нам создавать скелет экрана, когда данные загружаются на нашу страницу.
Скелетный экран - это место, где мы видим серые движущиеся блоки на экране во время загрузки страницы.
Мы можем установить, запустив:
npm install --save tb-skeleton
Тогда мы можем использовать его следующим образом:
main.js
import Vue from "vue"; import App from "./App.vue"; import skeleton from "tb-skeleton"; import "tb-skeleton/dist/skeleton.css"; Vue.use(skeleton); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
<template> <div id="app"> <skeleton :theme="opacity" :shape="radius" bg-color="#dcdbdc" duration="3"> <tb-skeleton width="30%" :aspect-ratio="0.1" :shape="circle" bg-color="#eee"></tb-skeleton> <tb-skeleton width="30%" :aspect-ratio="0.1"></tb-skeleton> <tb-skeleton width="30%" :aspect-ratio="0.1" bg-color="#eee"></tb-skeleton> </skeleton> </div> </template> <script> export default { name: "App" }; </script>
В приведенном выше коде мы зарегистрировали плагин с помощью:
import "tb-skeleton/dist/skeleton.css"; Vue.use(skeleton);
для регистрации компонентов, входящих в комплект.
Тогда у нас есть:
<skeleton :theme="opacity" :shape="radius" bg-color="#dcdbdc" duration="3"> <tb-skeleton width="30%" :aspect-ratio="0.1" :shape="circle" bg-color="#eee"></tb-skeleton> <tb-skeleton width="30%" :aspect-ratio="0.1"></tb-skeleton> <tb-skeleton width="30%" :aspect-ratio="0.1" bg-color="#eee"></tb-skeleton> </skeleton>
добавить ящики для экрана-скелета. Мы изменили width
на 30% от srceen. aspect-ratio
для регулировки соотношения сторон ящиков. shape
, чтобы изменить круг. и bg-color
, чтобы изменить цвет фона.
Заключение
Пакет Vue Progress Path позволяет отображать индикатор выполнения в различных формах.
Пакет Vue Loading Button позволяет нам создать кнопку с индикатором загрузки, чтобы показать, что что-то загружается.
Наконец, пакет TB Skeleton позволяет нам создать скелет страницы с несколькими полями, чтобы показать, что страница загружается.