vuex flash

Vuex Flash

Компонент флэш -сообщения для vue.js в Vuex

Функции

• несколько вспышек
• Пользовательский шаблон
• Постоянные данные вспышки в хранилище
• Высоко настраивается

Демо и пример

Живая демонстрация с фрагментом кода

Установить

 $ npm install --save vuex-flash

Использование

Компонент регистрации:

 //main.js

import Vue from 'vue' ;
import VuexFlash from 'vuex-flash' ;

Vue . use ( VuexFlash ) ;

Зарегистрируйте магазин Vuex:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

const store = new Vuex . Store ( {
  // ...
  plugins : [
    createFlashStore ( )
  ]
} ) ;

Flash Data

Использование global mixin

Проще говоря, опционы mixin: true При регистрации компонента, метод this.flash будет доступен в каждом компоненте

 Vue . use ( VuexFlash , { mixin : true } ) ;

Затем в других компонентах:

 this . flash ( { message : 'some message' , variant : 'success' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage

Вы можете изменить имя метода:

 Vue . use ( VuexFlash , { mixin : true , method : 'flashMe' } ) ;
//now
this . flashMe ( { message : 'some message' , variant : 'success' } ) ; 

О Global Mixin

Используя mutation

Вместо Global Mixin вы можете совершить мутацию из компонентов, чтобы установить флэш -сообщение:

methods: {
  //...
  someMethod ( ) {
    //..
    this . $store . commit ( 'FLASH/SET_FLASH' , { message : 'some message' , variant : 'success' } ) ;
  }
}

В mapMutations :

methods: {
  //...
  someMethod ( ) {
    //..
    this . flash ( { message : 'some message' , variant : 'success' } ) ;
  } ,

  ... mapMutations ( {
    flash : 'FLASH/SET_FLASH'
  } )
}

Обратите внимание, что тип мутации по умолчанию - FLASH/SET_FLASH . Вы можете настроить его в параметрах.

Отображать вспышку

 //in somepage component

< template >
  < flash-message variant = "success" > </ flash-message >
  //......
</ template >

Несколько вспышек

 this . flash ( { message : 'some success message' , variant : 'success' } ) ;
this . flash ( { message : 'some warning message' , variant : 'warning' } ) ;
this . flash ( { message : 'some danger message' , variant : 'danger' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage 

 //in somepage
< flash-message variant = "success" > </ flash-message >
< flash - message variant = "danger" > < / flash-message >
< flash-message variant = "warning" > </ flash-message >

Реквизит

Имя	Тип	По умолчанию	Осаждение
вариант	Нить	-	required опора
важный	Логический	ЛОЖЬ	Если True, не будет близкого варианта Flash Alert
Автогид	Логический	ЛОЖЬ	Auto Hide Flash Alert
Переходное имя	Нить	Пользовательские классы-трансляции	Vue Transitions name Prop больше
Переход	Нить	'Animated Fadeindown'	Пространственная отдельная строка для Vue Transitions enter-active-class Подробнее
Переход	Нить	'Animated Fadeoutup'	Пространственная отдельная строка для Vue Transitions leave-active-class Подробнее

Стиль вспышки

Vuex-Flash использует компонент Alert Bootstrap V4 в качестве оповещения по умолчанию. Вам нужно добавить файл CSS Bootstrap в тег.

 < link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css " integrity =" sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ " crossorigin =" anonymous " >

Вы всегда можете использовать свое собственное оповещение, используя пользовательский шаблон.

Вариант

Типы вариантов по умолчанию:

• успех
• предупреждение
• Опасность
• информация

Вы можете добавить пользовательские варианты.

Переход

vuex-flash использует animate.css в качестве эффекта перехода по умолчанию. Вам нужно добавить файл CSS в тег вашей головы

 < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " >

Вы можете установить другой стиль анимации, используя реквизиты transitionIn и transitionOut в нескольких флэш -сообщениях:

 < flash-message variant = "success" transitionIn = "animated bounceIn" transitionOut = "animated bounceOut" > </ flash-message >
< flash - message variant = "danger" transitionIn = "animated flipInX" transitionOut = "animated flipOutX" > < / flash-message >

Если вы решите использовать пользовательский шаблон, то вам нужно добавить эту функцию самостоятельно, если хотите.

Пользовательский шаблон

• Шаблон по умолчанию можно найти здесь.
• Поместите {{ message }} в свой шаблон, где вы хотите показать флэш -сообщение.
• Используйте v-if="show" , чтобы показать оповещение.
• Строковые данные cssClasses будут всем классом, включая variant class и ваши custom classes , которые вы предоставляете в опциях. Класс Bind :class="cssClasses"
• Используйте метод closeFlash , чтобы запустить кнопку «Закрыть».
• Вот пример , показывающий реализацию пользовательского шаблона уведомления Булмы

Постоянное флэш -сообщение

• Вот пример , который показывает, как сохранить штат VEUEX в сеансе Сонс-Материализации с использованием Vuex-PersistedState.
• Путь должен быть таким же, как и пространство имен.
• Тип мутатаиона в фильтре должен быть таким же, как и ключ мутации конфигурации

API

Vue.use(VuexFlash, [options]);

Доступны следующие параметры для настройки плагина компонента:

• name [String] - имя компонента. (default: 'FlashMessage')

• mixin [Boolean] - Если True, глобальный метод Mixin зарегистрируется для установки данных Flash. (default: false)

• method [String] - если mixin установлен TRUE, и эта опция дана, то Global Mixin Method зарегистрируется под этим именем. (default: 'flash')

• namespace - [String] - Пространство имен - это имя, используемое для создания модуля Flash Vuex. Это должно быть таким же, как и пространство имен createFlashStore . Это пространство имен, используемое для коммерции мутации для установки и очистки данных Flash. Если предоставлен, тип мутации будет '{namespace}/SET_FLASH' . (default: 'FLASH')

• duration [Number] - Продолжительность отображения флэш -сообщения (в миллисекундах) для вспышек автоматической шкуры. (default: 3000)

• template [String] - шаблон для использования, показывающий оповещение. Смотрите пользовательский шаблон.

• keep [Boolean] - Если ложные и данные сохраняются в хранении, хранилище будет очищено после отображения оповещения каждый раз. Если предоставлено, хранилище будет оставаться с нулевым значением. (default: true)

• storage [Storage] - хранилище, где данные сохраняются. Если keep установлен на False, данные будут очищены из этого хранилища. (default: sessionStorage)

• key [String] - Ключ используется хранилищем для постоянных данных. (default: '__vuexFlash')

• css [Array] - массив пользовательских имен классов CSS. Это очень полезно при создании пользовательского шаблона. (default: [])

• variantClass [Function] - Функция возвращает имя класса CSS в компонент оповещения о стилии на основе текущего варианта. . Может получить доступ к текущему варианту, используя this.variant . Variant. Не используйте функцию стрелы.
  (default: function(){ return `alert-${this.variant}`; })

• clearPersisted [Function] - функция, используемая для очистки, сохранивших данные из хранилища, когда будет keep на false.can доступ к хранилищу с помощью this.storage . Не используйте функцию стрелы.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

Доступны следующие параметры для настройки плагина Vuex Store:

• namespace [String] - это пространство имен - это имя, используемое для регистрации модуля магазина Vuex -Flash. (default: 'FLASH')

• setter [String] - это mutation name Flash Message Setter.if предоставлен, ключом мутации будет '${namespace}/${setter}' . (default: 'SET_FLASH')

• variants [Array] - массив пользовательских вариантов для использования в качестве состояния. Будут объединены с вариантами по умолчанию. (default: [])

Лицензия

Грань