element的表单验证效果替换

在做项目的时候看到了这个需求，需要用图片替换默认的文字显示

f12可以看到出错了的表单项会在div.el-form-item__content下有个div.el-form-item__error

于是就对div.el-form-item__error进行操作

/deep/ .el-form-item__content {
    display: flex;  // 使错误信息显示在同一行
    margin-right: 20px;
​
    // 修改错误显示
    /deep/ .el-form-item__error {
        position: relative;
        top: 0;
        right: 0;
        font-size: 0;   // 把默认文字取消
​
        // 用伪元素插入背景图片
        &:after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            right: -10px;
            top: 10px;
            background: url("~@/assets/img/error.png") 0 0 no-repeat;
            background-size: 20px 20px;
        }
    }
}