README

VuetifyBundle 向 Symfony 添加了各种 VuetifyJS 组件的支持

注意： 此包不会将 VuetifyJS 库添加到您的项目中。Vuetify 应已包含在您的项目中，并且应该已经实例化了一个基本的 Vue 实例。请参阅 Vuetify 的 快速入门指南 以开始使用，或遵循 添加 Vuetify 说明。

安装

您可以使用 Composer 安装此包

$ composer require solidworx/vuetify-bundle

过程完成后，您需要启用该包

<?php
// app/AppKernel.php

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            ...
            new SolidWorx\VuetifyBundle\SolidWorxVuetifyBundle(),
            ...
        ];
        
        ...        
     }
}

如果您正在使用带有 Flex 的 Symfony 4，则该包应自动注册。

您可以在 app/config.yml 文件中配置此包。有关可能的配置值，请参阅 配置参考。

添加 Vuetify

如果您尚未在应用程序中安装 Vuetify，则可以按照以下说明进行操作

// Using yarn
$ yarn add vuetify

// Using NPM
npm install vuetify --save

在主应用程序入口点中注册 Vuetify

import Vuetify from 'vuetify';

Vue.use(Vuetify);

添加 VuetifyBundle 资产

此包包含一些附加功能的资产。

作为脚本包含

要将编译后的 JS 包含在您的页面中，您可以将以下内容添加到模板中

<script src="{{ asset('bundles/solidworxvuetify/js/vuetify-bundle.min.js') }}">

注意： 记得运行 bin/console assets:install 命令

使用 webpack

如果您使用 webpack（或 webpack-encore），则可以直接导入模块

import VuetifyBundle from 'vendor/solidworx/vuetify-bundle/src/Resources/assets/js';

Vue.use(VuetifyBundle);

您还需要安装 lodash-es 包，这需要手动安装。

$ yarn add lodash-es
// or
$ npm install lodash-es

注意： 默认情况下，lodash-es 包包含在 vuetify-bundle.min.js 中，因此在使用编译后的脚本时无需安装它。

用法

表单主题

VuetifyBundle 包含一个 Symfony 表单主题，您可以使用它将所有表单输入渲染为 Vuetify 表单组件。

twig:
    form_themes:
        - '@SolidWorxVuetify/Form/fields.html.twig'

单选开关

为了使用切换输入作为单选按钮，您可以使用 RadioType 表单类型中的 switch 选项

<?php

$builder->add(
    'agree',
    RadioType::class,
    [
        'switch' => true
    ]
);

这将使用 v-switch 组件渲染单选按钮。

日期选择器

当在 DateType 表单类型中使用 'widget' => 'single_text' 选项时，输入将被转换为日期选择器组件。

月份选择器

VuetifyBundle 包含一个月份选择器表单输入，它将渲染一个只允许选择月份的日期选择器。

<?php

use SolidWorx\VuetifyBundle\Form\MonthType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class MyFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add(
            'month',
            MonthType::class,
            [
                'widget' => 'single_text'
            ]
        );
    }
}

表单集合

JavaScript 包含一个 form-collection 组件，允许您在使用 Symfony 的表单集合 时添加多个项目。

警告

您可以使用 v_alert twig 函数来显示警告消息。此函数接受三个参数：message、type 和 options。

此函数可以与 Symfony 的 flash 消息 一起使用

{% for label, messages in app.flashes %}
    {% for message in messages %}
        {{ v_alert(message, label) }}
    {% endfor %}
{% endfor %}

或独立使用

    {{ v_alert('Display some important information', 'info', {'outline': true}) }}

可用的警告类型

• 成功
• 信息
• 错误
• 警告

可用的选项

您还可以为警告设置默认配置选项。配置可以是全局的，或者您可以按警告类型设置选项。有关更多信息，请参阅 配置参考

配置

以下是完整的配置参考

vuetify:
    alert:

        # Sets global default options for each alert. Options per alert type can be overwritten in the `types` config.
        default:

            # Specifies that the Alert can be closed. The `v-model` option must be set when this is `true` in order for the alert to be dismissed
            dismissible:          false

            # Alert will have an outline
            outline:              false

            # Applies specified color to the control
            color:                null

            # Sets the transition mode
            mode:                 null

            # Sets the component transition. Can be one of the built in transitions or your own
            transition:           null

            # Sets the transition origin
            origin:               null

            # Designates a specific icon
            icon:                 null

        # Sets the default config per alert type. This will overwrite any global config for a specific alert type
        types:
            success:
                dismissible:          false
                outline:              false
                color:                null
                mode:                 null
                transition:           null
                origin:               null
                icon:                 null
            info:
                dismissible:          false
                outline:              false
                color:                null
                mode:                 null
                transition:           null
                origin:               null
                icon:                 null
            error:
                dismissible:          false
                outline:              false
                color:                null
                mode:                 null
                transition:           null
                origin:               null
                icon:                 null
            warning:
                dismissible:          false
                outline:              false
                color:                null
                mode:                 null
                transition:           null
                origin:               null
                icon:                 null