プロジェクトコンポーネントの画像ギャラリーのVueの実際の実現

はじめに
私はいないすべてが処女であることを、習慣は良いですが、結論には、コンポーネントやサードパーティ製のプラグインネイティブ、またはパッケージの多くを書きました。行うには多くのプラグインが良いです。例えば、今日の私は、このプラグインを使用：VUE-恐ろしい- Swiperを -これはまだ非常に強い回転[地図] / [スクロール]プラグインです。非常に使いやすく、便利に。GitHubの上で行くことができ、検索の詳細な理解が必要です。

---

プロジェクトで成果:(することができますあなたのプロジェクトに、このコンポーネントを参照）で、私たちは最初の一見

- >

---

プロジェクトで導入されました：

コンソール：

cnpm install vue-awesome-swiper --save

プロジェクトディレクトリの下にmain.js：

//...
import VueAwesomeSwiper from 'vue-awesome-swiper'
//...
import 'swiper/dist/css/swiper.css'

//...
Vue.use(VueAwesomeSwiper)

---

どのように使用するには：

プロジェクトの下のSrcディレクトリに新しい共通のフォルダを作成するには - どのgallay下のギャラリーコンポーネント]フォルダを作成し、グローバルな公共アセンブリを格納するために使用する - ストレージコンポーネントGallay.vue：

<template>
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide
          v-for="(item, index) in imgs"
          :key="index"
        >
          <img class="gallary-img" :src="item" />
        </swiper-slide>

        <!-- 这是底部的数字显示 -->
        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',   //分式表达
        observeParents: true,
        observer: true
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container   /* 样式穿透——可以影响不同组件的元素 */
    overflow: inherit
  .container
    display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000
    .wrapper
      height: 0
      width: 100%
      padding-bottom: 100%
      .gallary-img
        width: 100%
      .swiper-pagination
        color: #fff
        bottom: -1rem
</style>

上記のデータは、データを持つことはできません-コンポーネントは、デフォルトの初期データを持っていない、彼らはまた、「主成分」への「デフォルトのデータは、」行くべき、恐れてAjaxの送信エラーであっても。我々は、一般的になど、「外部転送」アプローチを使用して
ページ・アセンブリ（参照）：

<template>
	<div @click="handleBannerClick">此处是模拟点击窗口图标div</div>
	<common-gallary :imgs="imgs" v-show="showGallary"></common-gallary>
</template>

<script>
	import CommonGallary from './common/gallay/Gallary.vue';
	export default {
		data () {
			return {
				showGallary:false,
				imgs:['xxx','xxx']
			}
		},
		components: {
			CommonGallary
		},
		methods: {
			handleBannerClick () {
				this.showGallary=true;
			},
			close () {
				this.showGallary=false;
			}
		},
		//...
	}
</script>

---

コードを見てみましょう：
-のswiperOptions部分アセンブリの底部には、ページで
それを設定する方法？
我々はswiperラベルに動的プロパティのオプション追加:options="swiperOptions"でdata(){}>ページネーション、それはdivの場所を指して-それをスロットという設定オプションを与えて、真ん中を！