Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как лучше всего подходят пакеты для добавления бесконечной прокрутки, отображения всплывающих окон и добавления сетки flexbox.
vue-бесконечная загрузка
Мы можем добавить бесконечную прокрутку в наше приложение с помощью пакета vue-infinite-loading.
Чтобы добавить его, мы запускаем следующее для установки пакета:
npm i vue-infinite-loading
Затем мы можем использовать его, написав:
<template> <div> <div v-for="n in num" :key="n">{{n}}</div> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div> </template> <script> import InfiniteLoading from "vue-infinite-loading"; export default { components: { InfiniteLoading }, data() { return { num: 50 }; }, methods: { infiniteHandler($state) { this.num += 50; $state.loaded(); } } }; </script>
Мы добавляем регистр и используем компонент infinite-loading
для загрузки дополнительных данных.
Он генерирует событие infinite
, которое мы слушаем с помощью infiniteHandler
.
У него есть параметр $state
, который мы называем loaded
, чтобы указать, что мы загрузили то, что хотим отображать при прокрутке.
Мы просто перебираем некоторые числа от 0 до num
, которые обновляются методом infiniteHandler
.
Если мы не хотим загружать больше элементов, мы можем позвонить $state.complete
.
Итак, мы можем написать:
<template> <div> <div v-for="n in num" :key="n">{{n}}</div> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div> </template> <script> import InfiniteLoading from "vue-infinite-loading"; export default { components: { InfiniteLoading }, data() { return { num: 50 }; }, methods: { infiniteHandler($state) { if (this.num === 200) { $state.complete(); return; } this.num += 50; $state.loaded(); } } }; </script>
Теперь мы прекращаем обновление, когда this.num
равно 200.
Это означает, что бесконечной прокрутки больше не будет, если this.num
равно 200.
vue-grd
Если у нас возникли проблемы с flexbox, мы можем использовать vue-grd, чтобы гибко работать с нашим приложением Vue.
Для его установки запускаем:
npm i vue-grd
Тогда мы можем написать:
<template> <div> <vue-grid align="stretch" justify="start"> <vue-cell width="fill">fill</vue-cell> <vue-cell width="5of12">5of12</vue-cell> <vue-cell width="3of12">3of12</vue-cell> </vue-grid> </div> </template> <script> import { VueGrid, VueCell } from "vue-grd"; export default { components: { VueGrid, VueCell } }; </script>
для создания контейнера flexbox с vue-grid
.
Затем у нас есть vue-cell
, чтобы добавить содержимое в контейнер flexbox.
Контейнер имеет 12 столбцов, поэтому мы можем изменить ширину с помощью таких строк, как 5of12 или 3of12, чтобы заполнить 5 из 12 столбцов и 3 соответственно.
fill
заполняет оставшееся пространство содержимым vue-cell
.
justify
работает так же, как выравнивание в CSS.
Мы можем расположить наше время по концам, с промежутками между ними и т. Д.
флажок vue-material-checkbox
vue-material-checkbox позволяет нам легко добавить флажок стиля материального дизайна.
Для его установки пишем:
npm i vue-material-checkbox
Затем мы можем использовать его, написав:
<template> <div> <Checkbox v-model="val" :value="42">My Checkbox</Checkbox> <p>{{val}}</p> </div> </template> <script> import Checkbox from "vue-material-checkbox"; export default { components: { Checkbox }, data() { return { val: undefined }; } }; </script>
Компонент Checkbox
привязывается к состоянию val
.
Он установлен на true
, если установлен флажок, и false
в противном случае.
Мы можем установить цвет, отключено, обязательный атрибут, размер, размер шрифта и другие параметры.
жареный
Мы можем отображать тосты с помощью плагина vue-toasted.
Для его установки запускаем:
npm i vue-toasted
Затем мы можем использовать его, написав:
main.js
import Vue from "vue"; import App from "./App.vue"; import Toasted from "vue-toasted"; Vue.use(Toasted); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
<template> <div></div> </template> <script> export default { mounted() { this.$toasted.show("hello"); } }; </script>
Мы регистрируем плагин, а затем показываем тост.
Мы можем добавлять действия в тосты.
Например, мы можем написать:
<template> <div></div> </template> <script> export default { mounted() { this.$toasted.show("hello", { action: [ { text: "Cancel", onClick: (e, toastObject) => { toastObject.goAway(0); } }, { text: "Undo", push: { name: "/", dontClose: true } } ] }); } }; </script>
Мы передаем объект, который позволяет нам добавлять ссылки на тост.
Первая - это кнопка отмены.
Мы вызываем goAway
, чтобы он ушел. Аргумент - задержка в миллисекундах.
Второй - тот, который позволяет нам перейти к маршруту.
name
имеет путь маршрута от Vue Router.
Заключение
vue-infinite-loading - это простой в использовании пакет, позволяющий добавить бесконечную прокрутку в наше приложение.
vue-toasted позволяет отображать тосты в нашем приложении.
vue-material-checkbox позволяет нам отображать флажок.
vue-grd позволяет нам создавать сетку flexbox без нашего собственного CSS.