Laravel nova:如何覆盖nova组件

Question

比方说，我想用一个自定义的nova/resources/js/components/Form/FieldWrapper.vue (添加一些CSS类或添加额外的/nova )来代替它，如何做到这一点，而不对/nova目录进行更改(以便能够更新/nova)？

例如，更改编辑视图的usecase是：

• 向字段中添加"*“号，如果它是强制字段
• 将“每行一个字段”样式更改为“每行两个字段”样式，以使用大量浪费的空空间，并减少窗体的高度以减少滚动。

Answer 1

内部nova文件夹更改文件：

webpack.mix.js.dist到webpack.mix.js

输入nova文件夹并执行：

npm install
npm run watch

然后转到nova\resources\js文件夹

去更改vue组件，您需要吗？

然后运行(在根项目上)：

php artisan nova:publish

Answer 2

重写laravel nova vue文件的最简单方法是创建一个工具，并加载与要重写的组件同名的组件。

在我的例子中，我创建了一个定制的Nova操作，laravel不支持自定义操作，但无论如何您都可以这样做。为了使自定义操作工作，我需要覆盖2个laravel vue文件。让我告诉你我是怎么做到的。

首先，我使用命令php artisan nova:resource-tool vendor/package-name创建了一个定制工具。将供应商和包名称更改为您的首选项。上面的命令将在Laravel的根目录中创建工具文件夹和nova-components文件夹。

在工具的src文件夹下，有服务提供者类和主工具类，我的工具服务提供程序如下所示

<?php

namespace TestTool\DataExportAction;

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;
use Illuminate\Support\ServiceProvider;

class ActionServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Nova::serving(function (ServingNova $event) {
            Nova::script('data-export-action', __DIR__.'/../dist/js/action.js');
        });
    }
}

如您所见，我只提供一个js文件。

我的主要工具类DataExportAction.php如下所示

<?php

namespace TestTool\DataExportAction;

use Laravel\Nova\Actions\Action;
abstract class DataExportAction extends Action
{
    /**
     * The filter's component.
     *
     * @var string
     */
    public $component = 'data-export-action';
}

如您所见，扩展位于nova/src/Actions/Action.php的laravel操作基类，并在这里重写vue组件名，public $component = 'data-export-action';。

在tool resources/js文件夹中，我有一个重命名为action.js的主tool.js文件和一个组件文件夹，在该文件夹中，我们将放置vue组件，该组件将覆盖主要的Nova文件。

在action.js文件中，我有以下内容

Nova.booting(Vue => {
    Vue.component('data-export-action',  require('./components/ConfirmActionModal'));
}) 

注意，组件名称与DataExportAction类中定义的名称相同

现在，为了使用自定义类，我创建默认的nova操作类，而不是扩展nova/src/Actions/Action.php类，而是扩展DataExportAction类，它将在加载操作时自动使用自定义组件。

现在，为了更好地控制操作，我还需要覆盖位于nova/resources/js/components/ActionSelector.vue的Vue组件。如果您检查位于nova/resources/js/components.js的主nova组件文件，该组件将按以下方式加载

...

import ActionSelector from '@/components/ActionSelector'

Vue.component('action-selector', ActionSelector)

...

在tool components文件夹中创建一个ActionSelector.vue文件，其内容为nova/resources/js/components/ActionSelector.vue。然后在action.js文件中添加行

Vue.component('action-selector', require('./components/ActionSelector'));

现在，action.js文件看起来就像

Nova.booting(Vue => {
    Vue.component('data-export-action', require('./components/ConfirmActionModal'));
    Vue.component('action-selector', require('./components/ActionSelector'));
})

请注意，我们没有更改组件名称，现在当Nova加载action-selector组件时，它将加载自定义组件而不是默认组件

如果您试图运行npm来编译我们刚刚创建的工具的js，您将得到一个错误，因为我们正在重写的组件需要仅位于Nova node_modules文件夹中的文件，为了解决这个问题，我们编辑了如下所示的webpack.mix.js

let mix = require('laravel-mix')

mix.setPublicPath('dist')
    .js('resources/js/action.js', 'js');

到这个

let mix = require('laravel-mix')

mix.setPublicPath('dist')
    .js('resources/js/action.js', 'js')
    .webpackConfig({
        resolve: {
            alias: {
                '@/storage': path.resolve(__dirname, '../../nova/resources/js/storage'),
                '@': path.resolve(__dirname, '../../nova/resources/js/'),
            },
            modules: [
                path.resolve(__dirname, '../../nova/node_modules/'),
            ],
            symlinks: false
        },
    });

因此，我们不用使用工具node_modules文件夹，而是使用nova/中的工具文件夹

webpack现在应该成功地编译。

我们已经成功地重写了Laravel vue文件。

如果你有问题，评论下面，干杯！

Answer 3

在Nova的新版本中，这比较容易一些，而且一些名称也发生了变化。

我现在使用的方法是：

1. 创建资源工具sail php artisan nova:resource-tool yourcompany/nova-overrider
2. 在nova-components/NovaOverrider/resources/js/tool.js内部，将组件名称更改为要重写的组件名。在较新版本的Nova中，他们使用的是CamelCase，而不是烤肉盒。如果您想重写CreateResourceButton组件，它可能如下所示： 从“./components/ Tool”导入工具；Nova.booting((Vue，路由器，存储) => {Vue.component(CreateResourceButton，Tool)；})；
3. 运行sail npm run build-nova-overrider构建资产。

我建议您将Tool.vue更改为实际组件的名称。这样，您就可以在相同的nove资源中进行多个重写。