element 檢視大圖元件

注意需要導入元件才可使用

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'           

代碼

<template>
    <div>
      <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer" 
           :url-list="[url]" />
     <el-button @click="onPreview">檢視大圖</el-button>
    </div>
</template>
<script>
    // 導入元件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
      name: 'showViewer',
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 顯示檢視器
          url:'https://lovelydong.com/wp-content/themes/Memory-master/img/default_bg.jpg'
        }
      },
      methods: {
        onPreview() {
          this.showViewer = true
        }，
        closeViewer() {
          this.showViewer = false
        }
    }
</script>