Element-ui的Upload组件自定义进度条样式修改

<template>
    <div>
        <el-upload
                multiple
                :limit="3"
                list-type="picture-card"
                :on-progress="handleProgerss"
                :action="uploadUrl">
            <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <div class="el-progress el-progress-custom" v-if="file.percentage < 100">
                    <!--自定义进度条写在这里，你喜欢加啥都行，反正进度数字在下面๑乛◡乛๑-->
                    {{file.percentage | percent}}
                </div>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePreview(file)">
                    <i class="el-icon-zoom-in"></i>
                    </span>

                    <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                    </span>

                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
    </div>
</template>

<script>
    import {api} from "../common/config";

    export default {
        name: 'ElementUiLab',
        data() {
            return {
                uploadUrl: api.uploadUrl,
            }
        },
        filters: {
            percent(val) {
                return Number.parseInt(val) + '%';
            }
        },
        methods: {
            handleProgerss(event, file, fileList) {
                console.log(event, file, fileList);
            },

            handlePreview(file) {
                console.log(file);
            },

            handleDownload(file) {
                console.log(file);
            },

            handleRemove(file) {
                console.log(file);
            },
        },
        created() {},
    }
</script>

<style>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 148px;
        height: 148px;
        line-height: 148px;
        text-align: center;
    }

    .el-upload-list--picture-card .el-progress-custom {
        width: 148px;
        height: 148px;
        line-height: 148px;
        text-align: center;
        color: #818181;
        background-color: rgba(0, 0, 0, .8);
    }
</style>