Laravel 中创建可复用滑块组件的两种方法

本文介绍了在 Laravel 项目中创建可复用滑块组件的两种实用方法：使用 Blade include 和使用 View Composers。通过这两种方法，开发者可以避免代码重复，提高代码的可维护性和可读性，并更有效地管理视图逻辑。文章详细阐述了每种方法的实现步骤，并提供了示例代码，帮助开发者快速上手。

创建可复用滑块组件

在 Laravel 项目中，经常会遇到需要在多个页面中使用相同或相似的滑块组件的情况。为了避免代码重复，提高可维护性，我们可以将滑块组件封装成可复用的模块。本文将介绍两种实现方法：Blade include 和 View Composers。

方法一：使用 Blade include

Blade include 是 Laravel 提供的简单而强大的视图包含机制。我们可以将滑块组件的代码抽取到一个单独的 Blade 模板文件中，然后在需要使用该组件的页面中使用 @include 指令引入。

1. 创建滑块组件 Blade 模板文件：

   在 resources/views 目录下创建一个名为 slider.blade.php 的文件，并将滑块组件的 HTML 代码放入其中。

   <div class="section">
       <div class="section-wrapper section-padding">
           <div class="container">
               <h2 class="section-title testimonials-title">What value our Clients set upon our Partnership</h2>
   
               <div id="navWrapper" class="testimonials-nav">
                   <div id="prevArrow" class="testimonials-nav__arrow">
                       <img src="/img/arrow-left.svg" alt="arrow left icon">
                   </div>
                   <div id="navText" class="testimonials-nav__text"></div>
                   <div id="nextArrow" class="testimonials-nav__arrow">
                       <img src="/img/arrow-right.svg" alt="arrow right icon">
                   </div>
               </div>
           </div>
   
           <div class="testimonials-slider-wrapper">
               <div id="testimonialsSlider" class="testimonials-slider">
                   <div id="testimonialsSliderRow" class="testimonials-slider-row">
                       @foreach($testimonials as $testimonial)
                           <div class="testimonial">
   
                               <div class="testimonial-image d-none d-lg-block" style="background-image: url({{ $testimonial->bg_image }})"></div>
                               <div class="testimonial-image d-lg-none" style="background-image: url({{ isset($testimonial->bg_image_mobile) ? $testimonial->bg_image_mobile : $testimonial->bg_image }})"></div>
   
                               <div class="testimonial-text">{{ $testimonial->short_description }}</div>
   
                               <div class="testimonial-person">
                                   <div class="testimonial-person__image">
                                       <img src="{{ $testimonial->person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">
                                   </div>
                                   <div class="testimonial-person__name">{{ $testimonial->person_name }}</div>
                                   <div class="testimonial-person__position">{{ $testimonial->person_position }} - {{ $testimonial->person_location }}</div>
                               </div>
                           </div>
                       @endforeach
   
                   </div>
               </div>
           </div>
       </div>
   </div>

   登录后复制

   注意: 为了提高组件的通用性，可以考虑将变量名设置为更通用的名称。

2. 在需要使用滑块组件的页面中使用 @include 指令：

   在需要显示滑块的 Blade 模板文件中，使用 @include 指令引入 slider.blade.php，并传递所需的数据。

   @include('slider', [
       'testimonials'=>[
           (object) [
               'bg_image'=>'image1.jpg',
               'short_description'=>'test1',
               'person_image'=>'test.jpg',
               'image_alt'=>'test',
               'image_title'=>'test',
               'person_name'=>'Name',
               'person_position'=>'Test',
               'person_location'=>'test'
           ],
           (object) [
               'bg_image'=>'image2.jpg',
               'short_description'=>'test2',
               'person_image'=>'test.jpg',
               'image_alt'=>'test',
               'image_title'=>'test',
               'person_name'=>'Name',
               'person_position'=>'Test',
               'person_location'=>'test'
           ]
       ]
   ])

   登录后复制

   这种方法的缺点是需要在每个使用滑块组件的页面中手动映射数据，如果映射逻辑比较复杂，会导致视图代码变得臃肿。

方法二：使用 View Composers

View Composers 是一种将数据绑定到视图的更高级的方法。它可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰。

1. 创建 View Composer 类：

   在 app/Http/ViewComposers 目录下创建一个 View Composer 类，例如 MyViewComposer.php。

   <?php
   
   namespace App\Http\ViewComposers;
   
   use Illuminate\View\View;
   
   class MyViewComposer
   {
       public function compose(View $view)
       {
           $view->with('slider', view('slider', [
               'testimonials'=>[
                   (object) [
                       'bg_image'=>'image.jpg',
                       'short_description'=>'test',
                       'person_image'=>'test.jpg',
                       'image_alt'=>'test',
                       'image_title'=>'test',
                       'person_name'=>'Name',
                       'person_position'=>'Test',
                       'person_location'=>'test'
                   ],
                   (object) [
                       'bg_image'=>'image.jpg',
                       'short_description'=>'test',
                       'person_image'=>'test.jpg',
                       'image_alt'=>'test',
                       'image_title'=>'test',
                       'person_name'=>'Name',
                       'person_position'=>'Test',
                       'person_location'=>'test'
                   ]
               ]
   
           ]));
       }
   }

   登录后复制

   这个类负责准备滑块组件所需的数据，并将其绑定到视图中。

   

   阿里妈妈·创意中心

   阿里妈妈营销创意中心

   0

   查看详情

2. 在视图中使用滑块组件：

   在需要显示滑块的 Blade 模板文件中，添加以下代码：

   {!! $slider ?? '' !!}

   登录后复制

   这会输出由 View Composer 生成的滑块组件的 HTML 代码。

3. 注册 View Composer：

   创建一个 Service Provider，例如 ViewComposerServiceProvider.php，并将其放置在 app/Providers 目录下。

   <?php
   
   namespace App\Providers;
   
   use App\Http\ViewComposers\MyViewComposer;
   use Illuminate\Support\Facades\View;
   use Illuminate\Support\ServiceProvider;
   
   class ViewComposerServiceProvider extends ServiceProvider
   {
       /**
        * Register bindings in the container.
        *
        * @return void
        */
       public function boot()
       {
           // Here you can register all the bindings
           View::composer(
               'welcome', MyViewComposer::class
           );
       }
   
       /**
        * Register the service provider.
        *
        * @return void
        */
       public function register()
       {
           //
       }
   }

   登录后复制

   这个 Service Provider 负责注册 View Composer，将其绑定到特定的视图。

4. 将 Service Provider 添加到 config/app.php：

   在 config/app.php 文件的 providers 数组中添加 App\Providers\ViewComposerServiceProvider::class。

   return [
       'providers'=>[
           //..
           \App\Providers\ViewComposerServiceProvider::class
       ]
   ];

   登录后复制

   完成以上步骤后，滑块组件将自动加载到 welcome.blade.php 视图中。

总结

本文介绍了两种在 Laravel 项目中创建可复用滑块组件的方法：Blade include 和 View Composers。Blade include 简单易用，但需要在每个使用滑块组件的页面中手动映射数据。View Composers 可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰，但配置相对复杂。开发者可以根据实际情况选择合适的方法。

注意事项:

• 可以创建多个 View Composers，并将它们绑定到不同的视图，从而实现更灵活的组件复用。
• 可以使用模板方法或基类来减少 View Composers 中的重复代码。
• 建议将视图逻辑尽量保持简单，复杂的逻辑应该放在控制器或 View Composers 中处理。

以上就是Laravel 中创建可复用滑块组件的两种方法的详细内容，更多请关注php中文网其它相关文章！