vue使用elementUi中的图片查看器el-image-viewer

在Vue中使用Element UI的el-image-viewer组件来查看图片，首先确保你已经正确安装了Element UI库。

1. 在你的Vue项目中安装Element UI:

npm install element-ui --save

2. 在你的Vue项目中引入并使用el-image-viewer组件:

// main.js 或其他入口文件
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

3. 在你的Vue组件中使用el-image-viewer:

<template>
  <div>
    <!-- 触发查看图片的元素，例如按钮或图片 -->
    <el-button @click="showViewer">查看图片</el-button>
    
    <!-- el-image-viewer 组件 -->
    <el-image-viewer
      v-if="show"
      :on-close="closeViewer"
      :url-list="imageUrls"
    />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: false,
      imageUrls: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg'
      ]
    };
  },
  methods: {
    showViewer() {
      this.show = true;
    },
    closeViewer() {
      this.show = false;
    }
  }
};
</script>

在上面的例子中，我们定义了一个名为showViewer的方法来显示图片查看器，并通过改变show数据属性的值来控制el-image-viewer的显示。closeViewer方法用于关闭查看器。imageUrls数组包含了要查看的图片的URL列表。

确保你已经在项目中正确安装了Element UI，并且按照Element UI的使用规范来使用el-image-viewer组件。