ElementUI 中 ElImageViewer 組件的使用與屬性說明

前言

• ElImageViewer是Image組件的內置組件，主要實現圖片的預覽功能，對於這個組件官方文檔沒有過多介紹，但有些需求可以單獨使用。
• 組件的屬性可以到源碼中查看，但是如果只是為了看一下傳參我建議直接用vue的調試工具devtools查看，比較方便。

Image組件中實現圖片預覽

建議直接去官方文檔查看

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

ElImageViewer 組件使用方法

html

<!-- 這里用 v-if 和 v-show 的區別是 v-if 每次都會重置默認第一張預覽圖，由 initialIndex 屬性指定，而 v-show 會緩存上次切換的那張圖 -->
<el-image-viewer
  v-if="showViewer"
  :initial-index="1"
  :on-close="onClose"
  :on-switch="onSwitch"
  :url-list="urlList"
/>

js

// 引入ElImageViewer組件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    ElImageViewer
  },
  data() {
    return {
      // 是否顯示
      showViewer: false,
      urlList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods: {
    // 關閉圖片預覽
    onClose() {
      this.showViewer = false
    },
    // 切換圖片 index為圖片下標值
    onSwitch(index) {
      console.log(index)
    }
  }
}

ElImageViewer 組件屬性說明

Attributes

參數	說明	類型	可選值	默認值
initialIndex	默認顯示的第一張預覽圖（urlList的下標值）	Number	--	0
urlList	預覽圖的地址列表	Array	--	[]
zIndex	設置圖片預覽的 z-index	Number	--	2000
onClose	關閉圖片預覽時的回調函數	Function	--	--
onSwitch	切換上一張下一張圖片時的回調函數	Function	--	--