5

比方说，我想用自定义的替换 nova/resources/js/components/Form/FieldWrapper.vue（添加一些 CSS 类或添加额外的 HTML），如何做到这一点，而不更改 /nova 目录（能够更新新星）？

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

  • 向字段添加“*”符号，如果它是必填字段
  • 将“每行一个字段”样式更改为“每行两个字段”样式以使用巨大浪费的空白空间并降低表单的高度以减少滚动
4

2 回答 2

1

在 nova 文件夹内更改文件：

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

进入 nova 文件夹并执行：

npm install
npm run watch

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

去改变vue组件你需要吗

然后运行（在您的根项目上）：

php artisan nova:publish
于 2018-12-04T11:12:39.493 回答
0

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

就我而言，我正在创建自定义 Nova 动作，laravel Nova 不支持自定义动作，但无论如何你都可以这样做。为了使自定义动作起作用，我需要覆盖 2 个 laravel nova vue 文件。让我带你了解一下我是如何做到的。

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

在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';
}

如您所见，扩展位于的 laravel Nova 动作基类，nova/src/Actions/Action.php并在此处覆盖 vue 组件名称public $component = 'data-export-action';

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

在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. 如果您检查位于 的主 nova 组件文件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 文件夹中的文件，为了解决这个问题，我们编辑我们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 Nova vue 文件

如有疑问，请在下方评论，干杯！！

于 2020-12-10T03:42:18.310 回答