logo

CSS / JavaScript ​

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

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
// Navigate to User's detail page...
Nova.visit(`/resources/users/${userId}`)

// Navigate to remote URL...
Nova.visit({ url: 'https://nova.laravel.net.cn', remote: true })

visit 方法接受一个导航选项数组作为其第二个参数。由于 visit 方法在幕后使用 Inertia 自己的 visit 方法，因此所有 Inertia 的 visit 选项 都受 Nova 的 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
// Add a single keyboard shortcut...
Nova.addShortcut('ctrl+k', event => {
    // Callback...
})

// Add multiple keyboard shortcuts...
Nova.addShortcut(['ctrl+k', 'command+k'], event => {
    // Callback...
})

// Add a sequence shortcut...
Nova.addShortcut('* a', event => {
    // Callback...
})

// Remove a shortcut...
Nova.disableShortcut('ctrl+k')

// Remove multiple shortcuts...
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;

/**
 * Bootstrap any application services.
 *
 * @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 Mixins ​

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

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

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

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

为了使用 laravel-nova mixins 编译自定义包资产，您需要通过运行以下命令来准备 laravel/nova 的 node_modules

bash
npm run nova:install

# Or use the explicit command...
npm --prefix='vendor/laravel/nova' ci

NPM 要求

Laravel Nova 的资产使用 lockfile 版本 3 构建，需要 NPM 9+。

Vue DevTools ​

默认情况下，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 的资产。