ivew-admin 点击预览图片

1. ivew-admin table  

 

  {
            title: '产品图片',
            key: 'avatar1',
            align: 'center',
            render: (h, params) => {
              return h('div',
                [
                  h('img', {
                    style: {
                      width: "45px",
                      height: '45px',
                      verticalAlign: "middle",
                      marginTop: '3px',
                      marginBottom: '3px'
                    },
                    attrs: {
                      src: params.row.avatar1
                    },
                     on:{
                          click:(e)=>{
                              //点击预览图片
                              this.handleView(e.srcElement.currentSrc)
                          }
                    }
                  },)
                ]);
            }
          },

　　

 2.定义初始数据

   imgUrl: '', 
        visible: false,

　　3.放大事件

 handleView(url) {
      this.imgUrl = url;
      this.visible = true;
     },

 4.model

<Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
      <img :src="imgUrl" v-if="visible" style="width:100%;height:100%">
     </Modal>

　　效果：