---
nav: default
---
### Previewer
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fpreviewer"/>
<a href="demo/#/component/previewer" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/previewer</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/previewer" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <!-- 如果使用 previewer 默认 option ，那么图片 img 标签 必须要有 .vux-img选择器才能预览 -->
    <divider> 场景1：图片不显示直接 调用 show方法 </divider>
    <x-button
      mini
      @click="handlerClick1"
    >
      imageList.assign
    </x-button>
    <x-button
      mini
      @click="handlerClick2"
    >
      imageList.push
    </x-button>
    <x-button
      mini
      @click="handlerClick3"
    >
      imageList.splice
    </x-button>
    <x-button
      mini
      @click="handlerClick4"
    >
      imageList.pop
    </x-button>
    <x-button
      mini
      @click="handlerClick5"
    >
      有初始化数据
    </x-button>

    <previewer
      ref="previewer1"
      :options="options"
      :list="imageList1"
      :w="600"
      :h="400"
      @on-close="onClose"
    />
    <previewer
      ref="previewer2"
      :options="options"
      :list="imageList2"
      :w="600"
      :h="400"
      @on-close="onClose"
    />
    <previewer
      ref="previewer3"
      :options="options"
      :list="imageList3"
      :w="600"
      :h="400"
      @on-close="onClose"
    />
    <previewer
      ref="previewer4"
      :options="options"
      :list="imageList4"
      :w="600"
      :h="400"
      @on-close="onClose"
    />
    <previewer
      ref="previewer5"
      :options="options"
      :list="imageList5"
      :w="600"
      :h="400"
      @on-close="onClose"
    />

    <divider> 场景2： </divider>
    <img
      v-for="(item, index) in imageList6"
      :key="index"
      class="previewer-demo-img vux-img"
      :src="item.src"
      width="100%"
      @click="onClick(index)"
    >
    <previewer
      ref="previewer6"
      :options="options"
      :list="imageList6"
      :w="600"
      :h="400"
      @on-close="onClose"
    />
    <span
      v-show="textShow"
      class="previewer-demo-text"
    >图片描述信息</span>
  </div>
</template>

<script>
import { Divider, Previewer, XButton } from '../components/_index'

export default {
  components: {
    Previewer,
    Divider,
    XButton
  },
  data () {
    return {
      imageList1: [],
      imageList2: [],
      imageList3: [],
      imageList4: [],
      imageList5: [
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/Sw6KC5CGzUgrFyCcAA5sja.png'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ugzyJqWfJunDXNy8EuKsun.png'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/BZSdvayo6xLVLdQpKL5vke.png'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/qd48JFcBnoXuvSgy5kqcyQ.png'}
      ],
      imageList6: [
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/Sw6KC5CGzUgrFyCcAA5sja.png'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ebuqfKqVehQEKGtToH3USP.jpg'}
      ],
      options: {
        getThumbBoundsFn (index) {
          let isServer = typeof window === 'undefined'
          if (isServer) return
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      },
      textShow: false
    }
  },
  created () {
  },
  methods: {
    handlerClick1() {
      setTimeout(() => {
        this.imageList1 = [
          {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/UH2FcnahfTfohfomDHuuiE.png'},
          {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ebuqfKqVehQEKGtToH3USP.jpg'}
        ]
        this.$refs.previewer1.show(0)
      }, 200)
    },
    handlerClick2() {
      this.imageList2.push({src: 'https://test-images-cdn.cheanjia.com/zhongsheng/Sw6KC5CGzUgrFyCcAA5sja.png'})
      this.imageList2.push({src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ugzyJqWfJunDXNy8EuKsun.png'})
      this.$refs.previewer2.show(0)
    },
    handlerClick3() {
      this.imageList3.splice(0, 0, {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/BZSdvayo6xLVLdQpKL5vke.png'})
      this.$refs.previewer3.show(0)
    },
    handlerClick4() {
      this.imageList4 = [
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ebuqfKqVehQEKGtToH3USP.jpg'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/qd48JFcBnoXuvSgy5kqcyQ.png'},
        {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/BZSdvayo6xLVLdQpKL5vke.png'}
      ]
      this.imageList4.pop()
      this.$refs.previewer4.show(0)
    },
    handlerClick5() {
      this.imageList5.push({src: 'https://test-images-cdn.cheanjia.com/zhongsheng/UH2FcnahfTfohfomDHuuiE.png'})
      this.imageList5.push({src: 'https://test-images-cdn.cheanjia.com/zhongsheng/ebuqfKqVehQEKGtToH3USP.jpg'})
      this.$refs.previewer5.show(0)
    },
    onClick(index) {
      this.imageList6.splice(0, 1, {src: 'https://test-images-cdn.cheanjia.com/zhongsheng/BZSdvayo6xLVLdQpKL5vke.png'})
      this.$refs.previewer6.show(index)
      this.textShow = true
    },
    onClose() {
      this.textShow = false
    }
  }
}
</script>
<style>
.previewer-demo-text{
  position: absolute;
  bottom: 10px;
  left: 10px;
  color:#fff;
  z-index: 9999;
}
</style>

```

#### Github Issue