vue点击图片放大预览图片、旋转等_vue3 element plus js预览旋转按钮

vue点击图片放大预览图片、旋转等

//引入图片预览插件（前提是安装了element ui）
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  components: {
      ElImageViewer,
    },
     data() {
		return {
			designUrl: '',
			showViewer: false,
		}
	}
	methods:{
		// 关闭查看器
      closeViewer() {
        this.showViewer = false
      },
      //点击查看图片
      handleDesignInfo(rows) {
          this.showViewer = true
          // rows.src：图片地址
          this.designUrl = rows.src
      },
      
	}
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

使用

 <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[designUrl]" />
1