element-ui的图片预览 el-image增加点击范围

css:

.showScreenImg { /**预览图片icon */
        position: relative;
        left: -2px;
        width: 18px;
        height: 18px;
        z-index: 999;
        padding-right: 96px;
    }
    .showScreenImg:after{
        position: absolute;
        display: inline-block;
        left: 28px;
        top: -1px;
        content: '整个页面效果';
        width: 88px;
        height: 18px;
    }
    .showScreenImg .el-image__inner.el-image__preview { /**增加预览点击事件范围 */
        position: relative;
        z-index: 9999;
        padding-right: 96px;
        width: 18px;
        height: 18px;
    }

html:

<div class="preViewIcon">
     <el-image class="showScreenImg" src="/data/resource/images/icom.png" :preview-src-list="srcList" alt=""></el-image>
</div>

因尝试添加点击事件无法起效，想到增加范围点击，麻烦的在于审查元素时发现应该添加到 element-ui里的 .el-image__inner.el-image__preview下，这样点击文字也可以触发预览全屏效果了。

 

全屏效果：