基于 Flickity 在 Vue 中實現(xiàn)輪播圖組件并設(shè)置簡單的博客布局

一、準(zhǔn)備工作

除了自己純手工從頭開始編寫之外，還可以基于豐富的第三方 JavaScript 插件更快捷地編寫 Vue 組件，這里學(xué)院君以 JavaScript 輪播圖插件 Flickity 為例給大家演示下如何在 Vue 中集成它來實現(xiàn)輪播圖組件：

開始之前現(xiàn)在本地通過 NPM 安裝 flickity 依賴：

npm install flickity --save

二、基于 Flickity 編寫輪播圖組件

然后在 resources/js/components 目錄下新建一個 carousel 子目錄來存放輪播圖組件，這里我們新建一個 Flickity.vue，并初始化代碼如下：

<style src="flickity/dist/flickity.css">
</style>

<template>
<div>
    <slot></slot>
</div>
</template>

<script>
import Flickity from 'flickity';

export default {
    props: {
        wrapAround: {default: true},
        autoplay: {default: false}
    },
    mounted() {
        new Flickity(this.$el, {
            wrapAround: this.wrapAround,
            autoplay: this.autoplay
        });
    }
}
</script>

我們只需要參照官方示例代碼將其轉(zhuǎn)化為對應(yīng)的 Vue 組件實現(xiàn)即可：

首先需要引入 Flickity 插件依賴，然后在 Vue 組件 mounted 鉤子函數(shù)中將組件根元素掛載為輪播圖容器（通過 this.$el 實現(xiàn)），具體的輪播圖片通過插槽從父級作用域傳遞進來。

再就是一些輪播圖的配置選項，具體含義參照官方文檔了解即可。這里我們通過 props 屬性允許父級作用域自定義 wrapAround 和 autoplay 配置項。

最后不要忘了在 style 元素上引入 Flickity 的 CSS 樣式代碼。

非常簡單。

三、在視圖模板中引入組件

將上述 Flickity 組件注冊到 Vue 實例中：

Vue.component('carousel', require('./components/carousel/Flickity').default);

接下來就可以在 Blade 視圖模板中渲染這個組件了，我們在 resources/views 目錄下新建一個 carousel.blade.php 視圖文件進行測試：

@extends('layouts.app')

@section('content')
    <div class="container">
        <carousel>
            <img src="/storage/carousel/xueyuanjun-slogon-big.jpg" alt="Laravel 全棧開發(fā)學(xué)習(xí)平臺">
            <img src="/storage/carousel/php-fullstack-880.jpg" alt="Laravel 全棧工程師">
            <img src="/storage/carousel/laravel-8-x-docs-880.jpg" alt="Laravel 8.x 中文文檔">
            <img src="/storage/carousel/programmer-internal-skills-880.jpg" alt="程序員內(nèi)容修煉系列">
            <img src="/storage/carousel/programmer-internal-skills-880.jpg" alt="程序員內(nèi)容修煉系列">
        </carousel>
    </div>
@stop

這里引入的圖片文件都是事先準(zhǔn)備好的，存放在 storage/public/carousel 目錄下，然后通過 php artisan storage:link 命令在項目根目錄下的 public 中建立指向 storage/public 的軟鏈接 storage，具體操作參考前面編寫圖片上傳接口教程，如果你嫌這樣做麻煩，也可以基于 PlaceIMG 之類的第三方圖片服務(wù)應(yīng)用獲取用于測試的模擬圖片：

<carousel>
    <img src="http://placeimg.com/640/480/any">
    <img src="http://placeimg.com/640/480/any">
    <img src="http://placeimg.com/640/480/any">
    <img src="http://placeimg.com/640/480/any">
    <img src="http://placeimg.com/640/480/any">
</carousel>

對應(yīng)參數(shù)含義如下：

http://placeimg.com/圖片寬度/圖片高度/圖片類型

你可以按需進行自定義設(shè)置。

四、輪播圖組件渲染效果

在 routes/web.php 注冊一個測試路由 /carousel：

Route::view('carousel', 'carousel');

就可以在瀏覽器中查看對應(yīng)的輪播圖渲染效果了：

你可以通過屬性綁定的方式設(shè)置 autoplay 和 wrapAround 的啟用或禁用（通過 Vue 數(shù)據(jù)綁定機制可以確保這兩個屬性是布爾類型）：

<carousel :autoplay="true">
    ...
</carousel>

還可以為輪播圖片設(shè)置跳轉(zhuǎn)鏈接：

<carousel :autoplay="true">
    <a href="https://xueyuanjun.com">
        <img src="/storage/carousel/xueyuanjun-slogon-big.jpg" alt="Laravel 全棧開發(fā)學(xué)習(xí)平臺">
    </a>
    <a href="https://xueyuanjun.com/books/php-fullstack">
        <img src="/storage/carousel/php-fullstack-880.jpg" alt="Laravel 全棧工程師">
    </a>
    <a href="https://xueyuanjun.com/books/laravel-docs-8">
        <img src="/storage/carousel/laravel-8-x-docs-880.jpg" alt="Laravel 8.x 中文文檔">
    </a>
    <a href="https://xueyuanjun.com/books/golang-tutorials">
        <img src="/storage/carousel/golang-tutorials-880.jpg" alt="程序員內(nèi)容修煉系列">
    </a>
    <a href="https://xueyuanjun.com/shelves/programmer-internal-skills-series">
        <img src="/storage/carousel/programmer-internal-skills-880.jpg" alt="程序員內(nèi)容修煉系列">
    </a>
</carousel>

五、設(shè)置一個簡單的博客布局

還可以在此基礎(chǔ)上更進一步，設(shè)置一個簡單的布局，比如一般的博客首頁左側(cè)顯示輪播圖，右側(cè)邊欄顯示掛件，我們可以基于 Bootstrap 框架提供的柵欄布局快速實現(xiàn)這樣的效果，將 carousel.blade.php 視圖模板代碼調(diào)整如下：

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <carousel :autoplay="true">
                    <a href="https://xueyuanjun.com">
                        <img src="/storage/carousel/xueyuanjun-slogon-big.jpg" alt="Laravel 全棧開發(fā)學(xué)習(xí)平臺">
                    </a>
                    <a href="https://xueyuanjun.com/books/php-fullstack">
                        <img src="/storage/carousel/php-fullstack-880.jpg" alt="Laravel 全棧工程師">
                    </a>
                    <a href="https://xueyuanjun.com/books/laravel-docs-8">
                        <img src="/storage/carousel/laravel-8-x-docs-880.jpg" alt="Laravel 8.x 中文文檔">
                    </a>
                    <a href="https://xueyuanjun.com/books/golang-tutorials">
                        <img src="/storage/carousel/golang-tutorials-880.jpg" alt="程序員內(nèi)容修煉系列">
                    </a>
                    <a href="https://xueyuanjun.com/shelves/programmer-internal-skills-series">
                        <img src="/storage/carousel/programmer-internal-skills-880.jpg" alt="程序員內(nèi)容修煉系列">
                    </a>
                </carousel>
            </div>
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-header">
                        <h5>最新文章</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
                            <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                            <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                            <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                            <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
                            <a href="{{ url('posts') }}" class="list-group-item list-group-item-action text-center active">
                                查看所有文章
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

然后就可以在瀏覽器看到對應(yīng)的渲染效果了：

由于使用 col-sm- 前綴，所以該布局對移動端也是友好的：

最后如果你覺得本地測試每次手動輸入鏈接麻煩，可以在默認(rèn)的首頁下方添加一個入口鏈接：

<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20" stroke="currentColor"  class="ml-4 mt-2 w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828L10.646.646zm-1.8 2.908l-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z"/>
    <path fill-rule="evenodd" d="M2.832 13.228L8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086.086-.026z"/>
</svg>

<a href="{{ url('carousel') }}" class="ml-1 underline">
    Posts
</a>

這樣就可以在首頁點擊 Posts 鏈接進入輪播圖頁面了，通過輪播圖頁面又可以鍵入文章列表頁，整個流程就可以串起來了：

到這里，我們的 Vue 組件實戰(zhàn)部分就告一段落了，希望可以借此幫助你快速入門 Vue 組件開發(fā)，接下來，我們將進入基于 Laravel + Vue 開發(fā)單頁面應(yīng)用（SPA）的環(huán)節(jié)。