展示el-image组件的放大镜效果_el-image放大图片功能

1,html

<div class="demo-image__preview">

                <el-image

                  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' }"

                >

                </el-image>

                <div

                  class="demo-image__zoom-icon"

                  v-if="scope.row.showZoomIcon"

                >

                  <i class="el-icon-zoom-in"></i>

                </div>

              </div>

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,效果