logo

CSS / JavaScript ​

在创建自定义 Nova 工具、资源工具、卡片和字段时，你可以使用 JavaScript 组件全局可用的各种辅助工具。

Nova Requests Nova 请求 ​

你可以使用 Nova.request() 方法向您的应用程序或自定义工具、卡片和字段提供的后台路由发出 XHR 请求。 Nova.request() 方法由 Axios 提供，并提供相同的 API。不过， Nova.request() 方法会配置自己的 Axios 实例，该实例具有预配置拦截器，可正确处理和重定向 401、403 和 500 级 HTTP 服务器响应：

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

导航手册 ​

全局 Nova JavaScript 对象提供了一个 visit 方法，调用该方法可以导航到 Nova 面板中的其他 URL：

js
// 导航至用户详细页面...
Nova.visit(`/resources/users/${userId}`)

// 导航到远程 URL...
Nova.visit({ url: 'https://nova.laravel.com', remote: true })

visit 方法的第二个参数是一个导航选项数组。由于 visit 方法在幕后使用 Inertia 自己的 visit 方法，因此 Nova 的 visit 方法支持所有 Inertia 的 visit 选项：

js
Nova.visit(`/resources/users/${userId}`, {
  onFinish: () => Nova.success(`User ${userId} detail page.`)
})

事件总线 ​

你的自定义组件可将全局 Nova JavaScript 对象用作事件总线。总线提供以下方法，这些方法与 tiny-emitter 提供的事件方法相对应，并具有相同的行为：

js
Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, [...args])

通知 ​

你可以通过调用全局 Nova 对象上的 success、error、info 或 warning 方法，向自定义前端组件的用户显示响应通知：

js
Nova.success('It worked!')
Nova.error('It failed!')

键盘快捷键 ​

Nova 提供了两种方便的方法来管理键盘快捷方式，这些方法由 Mousetrap 提供。你可以在自定义组件中使用这些方法来注册和取消注册快捷键：

js
// 添加一个键盘快捷键...
Nova.addShortcut('ctrl+k', event => {
    // 回调...
})

// 添加多个键盘快捷键...
Nova.addShortcut(['ctrl+k', 'command+k'], event => {
    // 回调...
})

// 添加序列快捷键...
Nova.addShortcut('* a', event => {
    // 回调...
})

// 删除快捷键...
Nova.disableShortcut('ctrl+k')

// 删除多个快捷键...
Nova.disableShortcut(['ctrl+k', 'command+k'])

全局变量 ​

全局 Nova JavaScript 对象的 config 方法允许你获取当前 Nova base 路径和 userId 配置值：

js
const userId = Nova.config('userId');
const basePath = Nova.config('base');

不过，你可以使用 Nova::provideToScript 方法为该对象添加其他值。你可以在 Nova::serving 监听器中调用此方法，该监听器通常应在应用程序或自定义组件的服务提供商的 boot 方法中注册：

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

/**
 * 引导任何应用服务。
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::provideToScript([
            'mail_driver' => config('mail.default'),
        ]);
    });
}

一旦通过 provideToScript 方法向 Nova 提供了变量，就可以使用全局 Nova JavaScript 对象的 config 方法访问它：

js
const driver = Nova.config('mail_driver');

本地化 ​

本地化字符串可通过你的 NovaServiceProvider 传递给前端。要了解更多信息，请查阅 本地化文档。

使用 Nova 混合组件 ​

在 Laravel 应用程序的 nova-components 目录下开发的自定义 Nova 工具、资源工具、卡片和其他自定义包，可以通过定义一个 laravel-nova 别名来引用 Nova 自己的 packages.js 文件，该别名指向位于应用程序根目录 vendor 下的 Nova 安装中的该文件。此别名应放在软件包的 nova.mix.js中：

js
'laravel-nova': path.join(
  __dirname,
  '../../vendor/laravel/nova/resources/js/mixins/packages.js'
),

在 nova-components 目录之外开发的自定义 Nova 软件包应将 laravel/nova 声明为 Composer 的 "dev" 依赖关系。然后，定义一个 laravel-nova Mix 别名，指向自定义软件包的 vendor 目录中的 packages.js 文件：

js
'laravel-nova': path.join(
  __dirname,
  'vendor/laravel/nova/resources/js/mixins/packages.js'
),

要编译带有 laravel-nova 混合组件的自定义软件包资产，需要运行以下命令来准备 laravel/nova 的 node_modules ：

bash
npm run nova:install

# 或使用明确的命令...
npm --prefix='vendor/laravel/nova' ci

NPM 前提需求

Laravel Nova 的资源使用 lockfile 3 版本构建，需要 NPM 9 以上。

Vue 开发工具 ​

默认情况下，Nova 的 JavaScript 是为生产编译的。因此，如果不编译 Nova 的 JavaScript 用于开发，你将无法访问开箱即用的 Vue DevTools。为此，你可以从 Nova 项目的根目录下发出以下终端命令：

bash
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm ci
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish

请注意，不支持为生产目的编译 Nova 资产。