# Image Viewer 点击查看大图

点击查看大图,向下长滑动/点击左上角关闭按钮进行关闭

注意

具体效果可扫码体验,右侧demo与手机端体验有区别

# 规则

  • 必须提供图片地址

# 使用方法

<template>
  <div class="page">
    <button @click="ImageViewer({
        imgSrc: 'http://img.kaiyanapp.com/11593bd3f3edd71365147c6f05406b7e.png?w=500&h=312'
      })">点击查看大图</button>
    <br>
    <br>
    <button @click="showImage()">点击查看大图</button>
  </div>
</template>

<script>
  import {ImageViewer} from 'horizon-ui'
  export default {
    mounted() {
    },
    setup() {
      const showImage = ()=>{
        ImageViewer({
            imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595853825973&di=463f010e092eb5188d0ac14ef7403a0c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F08%2F20150908003022_FYV3h.jpeg'
        })
      }
      return {
        ImageViewer,
        showImage,
      }
    }
  }
</script>