Vue学习笔记-项目开发4.2 伸缩预览图（轮播图预览）

一、伸缩图展示组件

       由于伸缩图会在多地使用，所以可将其作为一个公共组件以供其他地方进行调用
       1、共用组件
       2、Gallary.vue组件内容

<template>
  // @click 点击事件是用来切换图片预览的显示与否
  <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',
        // 分页标志的样式。 fraction 是这样的：'1/2' '2/2'
        // 具体可参考文档 https://3.swiper.com.cn/api/pagination/2016/0126/299.html
        paginationType: 'fraction',
        // 因为图片数据是后来加载的。有可能会导致图片滑动不正常。所以添加这两个参数即可解决这问题，当父元素检测到dom结构发生变化后自动更新
        observeParents: true,
        observer: true
      }
    }
  },
  // 组件显示与否的点击事件
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>
 
<style lang="stylus" scoped>
   // 5、取消swiper-container的hidden属性。使分页插件能够显示在图片的下边。
  .container >>> .swiper-container
    overflow: inherit
	//样式的大致流程：
	// 1、先把背景写好。黑色 全屏， flex 纵向居中
	// 2、要显示的图片div包裹保证图片正常等比例显示，并包含swiperpagination
	// 3、图片等比例显示
	// 4.、图片分页插件颜色与位置
  .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: 75%
      .gallary-img
        width: 100%
      .swiper-pagination
        color: #fff
        bottom: -1rem
</style>

二、公共组件调用设置

       减少调用编写较长的路径在build/webpack.base.conf.js中设置好别名，以供方便调用

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/style'),
      'common': resolve('src/common'),
    }
  },

三、普通组件调用及组件间交互

<template>
  <div>
    // 1、定义显示事件
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_600x330_0dcecae1.jpg">
      <div class="banner-info">
        <div class="banner-title">北京海洋馆(AAAA景区)</div>
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe63a;</span>
          39
        </div>
      </div>
    </div>
    // 4、使用组件 绑定imgs显示数据，v-show显示与否判定 @close接收组件传递来的事件
    <common-gallary :imgs="imgs" v-show="showGallary" @close="handleGallyClose"></common-gallary>
  </div>
</template>

<script>
// 2、导入图片伸缩公共组件
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'Detail',
  data () {
    return {
      showGallary: false,
      imgs: ['http://img1.qunarzz.com/sight/p0/1908/2a/2a806283e9eb41d5a3.img.jpg_r_800x800_3091ee84.jpg', 'http://img1.qunarzz.com/sight/p0/1908/ae/ae1d7a640eab6bffa3.img.jpg_r_800x800_45b266b8.jpg']
    }
  },
  // 5、组件方法编写
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallyClose () {
      this.showGallary = false
    }
  },
  // 3、定义子组件
  components: {
    CommonGallary
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position relative
    overflow hidden
    height 0
    padding-bottom 55%
    .banner-img
      width 100%
    .banner-info
      display flex
      position absolute
      left 0
      right 0
      bottom 0
      line-height .6rem
      color #fff
      // 渐变色
      background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .banner-title
        flex 1
        font-size .32rem
        padding 0 .2rem
      .banner-number
        margin-top .14rem
        padding 0 .4rem
        line-height .32rem
        height .32rem
        border-radius .2rem
        background rgba(0, 0, 0, .8)
        font-size .24rem
        .banner-icon
          font-size .24rem
</style>