点击按钮(文字)调起elementUI大图预览

时隔一年，我又回来了 ~ 最近在做后台，遇到一个需求，就是点击“查看详情”按钮，调起elementUI的大图预览功能，预览多张图片，如下图：

首先想到的是使用element-ui的el-image组件，但它是通过点击图片来实现的，不太符合我们的需求，如果有这方面的需求可以去官网看一下；element大图预览官网实例

下面来说如何解决点击按钮预览多张图片(我写的项目最多就预览两张图片) ，使用el-image-viewer(图片查看器)；

html中代码：

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
<el-button type="text" @click="onPreview(img)">查看详情</el-button>

// 两张这样写

<el-image-viewer

              v-if="showViewer"

              :on-close="closeViewer"

              :url-list="[url1,url2]"

 />

js代码：

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';// 导入组件
export default {
  components: {
    	ElImageViewer
  },
  data() {
  	return {
  		url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  		showViewer: false, // 显示查看器
  	}
  },
  methods(){
  	// 点击按钮预览图片
      onPreview(img) {
      this.url = img;
      this.showViewer = true
    },
    // 关闭查看器
      closeViewer() {
      this.showViewer = false
    },
  }
}
</script>

 看一下效果叭亲亲们~

就是这样子啦，完成啦 ，有问题留言（但我可能不太会哈哈哈哈哈），又是忙碌的一天，坐等下班~