CSS / JavaScript

CSS

Nova 使用 Tailwind.css 库来作为前端的样式。因此,对于自定义的组件你可以随意使用 Tailwind 的功能和类。

JavaScript

当你创建自定义的 Nova 工具,资源工具,卡片,和字段的时候,你可以使用各种各样的全局可用的辅助函数。

Axios

Axios HTTP 库 是全局可用的,它可以让你很方便地发送 HTTP 请求到你自定义组件的 Laravel 控制器:

axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

Nova 请求

除了直接用 Axios 之外,你也可以使用 Nova.request() 方法。 这个方法配置了一个单独的 Axios 实例,它运用预先配置好的拦截器去处理和重定向 401403, 以及 500 服务器错误:

Nova.request().get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

事件机制

你自定义的组件可以使用全局的 Nova JavaScript 对象作为发布/订阅事件总线机制。 这个机制提供了以下的方法,它和 Vue 提供的 事件方法一致:

Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)

消息通知

Nova 的 Vue 配置自动注册了 Vue toasted 插件。因此,在你自定义的组件内,你可以利用 this.$toasted 对象去呈现简单的消息通知:

this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })

全局变量

全局 Nova JavaScript 对象的 config 属性包含了当前 Nova 的 base 路径和 userId

const userId = Nova.config.userId;
const basePath = Nova.config.base;

不过,你可以在 Nova::serving 监听器里调用 Nova::provideToScript 方法去加入额外的值, 这个监听器通常会被注册在项目或自定义组件的服务提供者的 boot 方法中:

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

/**
 * 启动所有的应用服务
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::provideToScript([
            'user' => $event->request->user()->toArray(),
        ]);
    });
}

一旦通过 provideToScript 方法加载了新变量,你可以用全局的 Nova JavaScript 对象访问它:

const name = Nova.config.user.name;

其它可用的库

除了 Axios 之外,在自你定义的组件中,你还可以使用全局通用的 LodashMoment.js 库。

本文章首发在 LearnKu.com 网站上。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~