展示el-image组件的放大镜效果

1,html

               

                  style="width: 100%; height: 50px"

                  :src="scope.row.url"

                  :preview-src-list="[scope.row.url]"

                  @mouseenter="scope.row.showZoomIcon = true"

                  @mouseleave="scope.row.showZoomIcon = false"

                  :style="{ opacity: scope.row.showZoomIcon ? '0.7' : '1' }"

                >

               

               

                  class="demo-image__zoom-icon"

                  v-if="scope.row.showZoomIcon"

                >

                 

               

             

2,css 

.demo-image__container {

  position: relative;

}

.demo-image__zoom-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 24px;

  color: #fff;

  padding: 10px;

  border-radius: 50%;

  opacity: 0.8;

  pointer-events: none;

  transition: opacity 0.3s;

}

.demo-image__zoom-icon:hover {

  opacity: 1;

}

3, 定义

data(){

return {

showZoomIcon: false,

}

}

4,效果