vue在高德地图的弹窗中使用轮播图组件及封装

前言：因为element的轮播图需要在页面初始化后显示，但是如果是把轮播图的效果是放在自定义的弹窗等上面就不可以用了，所以直接封装一个组件按需引入使用。

最后效果如下：

在此做个记录：
1、轮播图组件index.vue

<template>
  <div class="u-carousel-banner" @mouseenter="clearTimer" @mouseleave="runInv" style="height: 200px">
    <button type="button" @click="gotoPage(prevIndex)" class="el-carousel__arrow el-carousel__arrow--left" :class="isHover ? 'u-hide' : ''">
      <i class="el-icon-arrow-left"></i>
    </button>
    <div class="u-carousel-item">
      <img :src="dataList[currentIndex]" />
    </div>
    <div class="u-carousel-page" v-if="this.dataList.length > 1">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" @click="gotoPage(index)" :class="{ current: currentIndex == index }"></li>
      </ul>
    </div>
    <button
      type="button"
      @click="gotoPage(nextIndex)"
      class="el-carousel__arrow el-carousel__arrow--right"
      :class="isHover ? 'u-hide' : ''"
    >
      <i class="el-icon-arrow-right"></i>
    </button>
  </div>
</template>

<script>
import { Image } from 'element-ui' //先要引入组件
export default {
  components: {
    'el-image': Image,
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
      isHover: false,
      dataList: this.list,
    }
  },
  mounted() {
    this.runInv()
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.dataList.length - 1
      } else {
        return this.currentIndex - 1
      }
    },
    //下一张
    nextIndex() {
      if (this.currentIndex == this.dataList.length - 1) {
        return 0
      } else {
        return this.currentIndex + 1
      }
    },
  },
  methods: {
    gotoPage(index) {
      this.currentIndex = index
    },
    runInv() {
      this.isHover = !this.isHover
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 3000)
    },
    clearTimer() {
      this.isHover = !this.isHover
      clearInterval(this.timer)
      this.timer = null
    },
  },
}
</script>

2、text.vue引入使用：

<template>
  <div id="app">
    <div ref="map" class="map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import AMap from 'AMap'
import Vue from 'vue/dist/vue.esm.js'
import customTable from '@/components/mapContent/index.vue' //引入组件
export default {
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map(this.$refs.map, {
        center: [116.398801, 39.907123],
        zoom: 11,
      })
      const maker = new AMap.Marker({
        position: [116.398801, 39.907123],
        extData: [
          {
            name: 'test',
            addr: 'adfh',
          },
        ],
      })
      maker.on('click', (e) => {
        const self = this
        // 这里可以加入自定义的代码片段
        var html = '<div> <div>11111111</div>'
        const infowindowWrap = Vue.extend({
          template: `${html}<customTable :list="list"> </customTable></div>`,
          name: 'test',
          components: {
            customTable: customTable,
          },
          data() {
            return {
              list: [
                'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
                'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
                'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg',
                'https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg',
                'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg',
                'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg',
              ],
            }
          },
          methods: {
            handlerClose() {
              self.map.clearInfoWindow()
            },
          },
        })
        const component = new infowindowWrap().$mount()
        const infowindow = new AMap.InfoWindow({
          isCustom: false,
        })
        infowindow.setContent(component.$el)
        infowindow.open(this.map, e.lnglat)
      })
      this.map.add(maker)
    },
  },
}
</script>

总结：这样就完成了图片轮播的封装，在此做个记录。

升级：**现在又有新的功能，想要预览图片，试过element的 :preview-src-list 发现不是我想要的效果，这边使用的是viewjs
使用步骤：

1、安装依赖

npm install v-viewer --save

2、在页面按需引入组件 （注意：不能在main.js中引入，否则页面调用不到）

import Vue from 'vue/dist/vue.esm.js'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    inline: true,
    button: true,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source',
  },
})

3、页面使用：在img标签外用viewer

<viewer :images="dataList" style="height: 100%">
   <img :src="dataList[currentIndex]" />
</viewer>

这里的dataList是数组

附预览的属性值：

以上。