翻译进度
7
分块数量
2
参与人数

CSS / JavaScript

这是一篇社区协同翻译的文章,你可以点击右边区块信息里的『改进』按钮向译者提交改进建议。

CSS

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

JavaScript

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

jltxwesley 翻译于 2个月前

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 => {
    // ...
})
jltxwesley 翻译于 2个月前

事件机制

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

Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)
jltxwesley 翻译于 2个月前

消息通知

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

this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })
jltxwesley 翻译于 2个月前

全局变量

全局 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;
jltxwesley 翻译于 2个月前

其它可用的库

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

jltxwesley 翻译于 2个月前

本文章首发在 Laravel China 社区
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

参与译者:2
讨论数量: 0
发起讨论


暂无话题~