关于vue.js:Elementul的-elimageviewer组件实现点击或者js触发能预览大图功能

element-ul有大图预览性能

但咱们不想展现图片,想实现的是点击按钮,或者通过js事件触发,能预览大图(多张也能够预览)的性能。

1、导入组件

    // 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2.注册组件

    components: {
      ElImageViewer,
    },

3.应用组件

         <p @click="showImage(picture)">查看图片</p>
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="srcList"
      ></el-image-viewer>

4.相干的data定义

    data() {
    return {
      srcList: [],
      showViewer: false // 显示查看器
   }
}

5.methods

    // 查看图片
showImage(path) {
  this.srcList = path;
  this.showViewer = true;
},
// 敞开查看器
closeViewer() {
  this.showViewer = false;
},

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理