배경 관리 시스템의 큰 미리보기

1. 요구사항:

목록에서 표지 이미지를 클릭하면 미리 볼 수 있고, 다시 클릭하면 닫힙니다.

2. 효과:

3. 단계:

(1) 클릭 이벤트를 바인딩하고 그림의 ID를 전달합니다.

<el-table-column  label="课程封面" width="150" >
    <template  slot-scope="scope" >
       <img :src="scope.row.cover" alt="" 
         @click="previewPic(scope.row.cover)">
    </template>
</el-table-column>

(2) 글머리 기호 상자를 설정하여 그림을 표시하고, 글 머리 기호 상자가 닫힌 상태로 초기화되며,

         새로운 변수를 사용하여 그림을 수신하고 "그림을 닫으려면 클릭하세요" 이벤트를 동시에 바인딩합니다.

<el-dialog :visible.sync="dialogVisible" 
        :modal="false"  :show-close="false" >
     <div style="text-align: center;">
        <img :src="previewpic" alt=""  @click="close()" >
     </div>
</el-dialog>


data（） {
    return {
        previewpic:"",
        dialogVisible：false
    }
}

(3) 사진 미리보기 및 사진 닫기 이벤트를 메소드에 작성합니다.

//预览大图
previewPic(url) {
   this.previewpic = url; //将接收的图片赋值给弹框里面的图片
   this.dialogVisible = true;
 },
//点击图片关闭预览
close() {
   this.dialogVisible = false;
},