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.