过滤器 ​

概述 ​

Nova 附带几种过滤器类型；但是，有时您可能需要一个开箱即用时未提供的过滤器类型。为此，Nova 允许您构建自定义过滤器。

定义过滤器 ​

可以使用 nova:custom-filter Artisan 命令生成自定义过滤器。默认情况下，所有新过滤器都将放置在应用程序的 nova-components 目录中。使用 nova:custom-filter 命令生成过滤器时，传递给命令的过滤器名称应遵循 Composer vendor/package 格式。因此，如果我们正在构建一个年龄范围过滤器，我们可能会运行以下命令

php artisan nova:custom-filter acme/age-range

生成过滤器时，Nova 会提示您安装过滤器的 NPM 依赖项、编译其资源并更新应用程序的 composer.json 文件。所有自定义过滤器都作为 Composer "path" 存储库 与您的应用程序注册。

Nova 过滤器包含构建过滤器所需的所有脚手架。每个过滤器甚至包含自己的 composer.json 文件，并且已准备好与世界分享到 GitHub 或您选择的源代码控制提供商。

注册过滤器 ​

Nova 过滤器可以在资源的 filters 方法中注册。此方法返回资源可用的过滤器数组。要注册您的过滤器，请将您的过滤器添加到此方法返回的过滤器数组中

use Acme\AgeRange\AgeRange;

/**
 * Get the filters available for the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        new AgeRange,
    ];
}

或者，您可以使用 make 方法实例化您的过滤器

use Acme\AgeRange\AgeRange;

/**
 * Get the filters available for the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        AgeRange::make(),
    ];
}

传递给 make 方法的任何参数都将传递给过滤器的构造函数。

构建过滤器 ​

Nova 生成的每个过滤器都包含自己的服务提供者和“过滤器”类。以 age-range 过滤器为例，过滤器类将位于 src/AgeRange.php。

过滤器的服务提供者也位于过滤器的 src 目录中，并在过滤器的 composer.json 文件中注册，以便 Laravel 框架会自动加载它。

过滤器 Vue 组件 ​

当 Nova 生成您的过滤器时，它会创建一个 resources/js/components/Filter.vue Vue 组件。此组件包含过滤器在过滤器下拉菜单中显示时的模板和逻辑。默认情况下，该组件显示一个简单的 select 过滤器组件，以及更新过滤器状态所需的代码。

管理筛选器状态 ​

自定义 Nova 筛选器使用 Vuex 来管理其状态。默认情况下，您的筛选器 Vue 组件存根包含更新筛选器当前状态所需的必要基本逻辑。修改筛选器组件时，应确保在筛选器的“选中”值更改时将更改提交到 Vuex 存储。

handleChange(event) {
    this.$store.commit('updateFilterState', {
        filterClass: this.filterKey,
        value: event.target.value,
    })

    this.$emit('change')
}

资源 ​

当 Nova 生成您的筛选器时，会为您生成 resources/js 和 resources/css 目录。这些目录包含您的筛选器的 JavaScript 和 CSS。

注册资源 ​

您的 Nova 筛选器服务提供商会注册您的筛选器的已编译资源，以便它们可供 Nova 前端使用。

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

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::script('age-range', __DIR__.'/../dist/js/filter.js');
        Nova::style('age-range', __DIR__.'/../dist/css/filter.css');
        Nova::translations(__DIR__.'/../resources/lang/en/age-range.json');
    });
}

编译资源 ​

您的 Nova 筛选器包含一个 webpack.mix.js 文件，该文件是在 Nova 创建您的筛选器时生成的。您可以使用 NPM dev 和 prod 命令构建您的筛选器。

# Compile your assets for local development...
npm run dev

# Compile and minify your assets...
npm run prod

此外，您还可以运行 NPM watch 命令，以便在更改资源时自动编译资源。

npm run watch