README

使用 VueJs 为 Laravel 应用制作的美丽 alert 组件。

概览

安装

步骤 1: Composer

在命令行中运行

composer require devmi/flashy

步骤 2: 服务提供者

如果你使用 Laravel >5.5，请跳到下一步。

打开 config/app.php，在 providers 数组中

Devmi\Flashy\FlashyServiceProvider::class

步骤 3: 发布商

现在你必须发布 Vue 组件并注册它才能使用。

php artisan vendor:publish --tag=devmi

打开 resources/assets/js/app.js 并注册组件

Vue.component('flashy', require('./vendor/devmi/Flashy.vue'));

你可以在 resources/assets/js/vendor/devmi/Flashy.vue 文件下找到这个文件。

步骤 3: 添加 Flashy 标签

你可以在 blade 文件中的任何位置添加 flashy 组件，但最好添加到 app.blade.php 文件中

<flashy data-message="{{ flashy()->message() }}"></flashy>

用法

现在在你的控制器中，在每次重定向之前，你可能可以这样做

flashy()->push('This message will be flashed.');

默认颜色是 bootstrap alert 成功。

更多控制

你也可以更改默认主题颜色，显示延迟，添加标题，停止动画

app.blade.php

<flashy
    title="{{ flashy()->title() }}"
    message="{{ flashy()->message() }}"
    type="{{ flashy()->type() }}"
    delay="3000"
    animated="true"
>
</flashy>

并且

flashy()->push(message, type, title);

标题: String (可选)

消息: String

类型: string 例如：['primary', 'success', 'danger', 'warning', 'secondary', 'black', 'light'] (可选) | 默认: success

延迟: Integer (可选) | 默认: 3000

动画: Boolean (可选) | 默认: true

注意

如果你使用 Ajax 请求，你应该在 resources/assets/js/app.js 中添加以下代码

window.events = new Vue();
window.flashy = (message, type, title) => window.events.$emit('flashy', message, type, title)

然后你可以从任何 .vue 文件中调用 flashy() 全局函数并传递你的参数。

问题和贡献

如果你发现任何错误或问题，请提交问题或创建拉取请求，谢谢！。