element upload avator hover 有遮罩层 删除和预览按钮 选项

hover:

<div class="upload">
          <el-upload
            class="avatar-uploader"
            :on-success="handleAvatarSuccess">
            <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 阻止冒泡 嘻嘻 -->
            <span class="el-upload-list__item-actions"
              @click.stop
              v-if="ruleForm.imageUrl">
              <span 
                class="el-upload-list__item-preview icon"
                @click="handlePreview">
                <i class="el-icon-zoom-in preview-icon"></i>
              </span>
              <span
                class="el-upload-list__item-preview"
                @click="handleRemove"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </el-upload>
        </div>
        <el-dialog :visible.sync="dialogVisible"      append-to-body>
          <img width="100%" :src="ruleForm.imageUrl" alt="上传的图片">
        </el-dialog>

handleAvatarSuccess(res, file) {
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },
handlePreview() {
      this.dialogVisible = true;
      console.log('preview');
    },

.el-upload-list__item-actions {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  background-color:rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.3s
}
.el-upload-list__item-actions:hover {
  opacity: 1;
}
//垂直居中 很有意思呀
.el-upload-list__item-actions:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
.avatar-uploader /deep/ .el-upload {
  position: relative;
}

vertical-align: