Question

比方说，我想用一个自定义变量（添加一些CSS类或添加其他HTML）替换nova / resources / js / components / Form / FieldWrapper.vue，如何做到这一点，而无需更改/ nova目录（以便能够更新nova）？

例如，用于更改编辑视图的用例：

在必填字段中添加“ *”符号
将“每行一个字段”样式更改为“每行两个字段”样式以使用巨大的浪费的空白空间并减小表单的高度以减少滚动

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 Nova不支持自定义动作，但是您仍然可以执行此操作。为了使自定义动作生效，我需要覆盖2个laravel nova vue文件。让我向您介绍我的操作方式。

i首先使用命令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 Nova动作基类，并在public $component = 'data-export-action';覆盖了vue组件名称

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

在action.js文件中，我有这个

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

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

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

现在，为了获得对动作的更多控制，我还需要重写位于nova/resources/js/components/ActionSelector.vue的Vue组件。如果您检查nova/resources/js/components.js上的主要新星组件文件，则组件的加载方式如下

...

import ActionSelector from '@/components/ActionSelector'

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

...

在工具组件文件夹中创建一个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文件夹中的文件，要解决此问题，我们将编辑{{ 1}}看起来像这样

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文件夹

webpack现在应该可以成功编译。

我们已经成功覆盖了Laravel Nova vue文件

如果您有任何疑问，请在下面评论，干杯！

Laravel Nova：如何覆盖Nova组件

2 个答案: