过滤器 ​

概述 ​

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 「路径」存储库 的形式在应用程序中注册。

Nova 过滤器包含构建过滤器所需的所有脚手架。每个过滤器甚至都包含自己的 composer.json 文件，可随时在 GitHub 或你选择的源控制提供商上与全世界共享。

注册过滤器 ​

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

use Acme\AgeRange\AgeRange;

/**
 * 获取资源可用的过滤器。
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        new AgeRange,
    ];
}

或者，你也可以使用 make 方法来实例化过滤器：

use Acme\AgeRange\AgeRange;

/**
 * 获取资源可用的过滤器。
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        AgeRange::make(),
    ];
}

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

创建过滤器 ​

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

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

过滤器 Vue 组件 ​

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

管理过滤器状态 ​

自定义 Nova 过滤器使用 Vuex 管理其状态。默认情况下，过滤器的 Vue 组件存根包含更新过滤器当前状态所需的基本逻辑。在修改过滤器的组件时，应确保过滤器的 "selected" 值发生变化时，将更改提交到 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;

/**
 * 引导任何应用服务。
 *
 * @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 命令来构建你的过滤器：

# 为本地开发编译资源...
npm run dev

# 编译并最小化资源...
npm run prod

此外，你还可以运行 NPM watch 命令，在资源发生变化时自动编译它们：

npm run watch