element ui 圆形进度条样式修改

Tanjc518

已于 2023-06-15 14:05:10 修改

阅读量499

点赞数

文章标签： css html 前端

于 2023-04-12 17:29:03 首次发布

本文链接：https://blog.csdn.net/Tanjc518/article/details/130108931

版权

一、修改进度条颜色
颜色组件

<script>
export default {
    name: "ProgressColor",
    props: {},
    components: {},
    data() {
        return {};
    },
    watch: {},
    computed: {},
    methods: {},
    mounted() {},
    beforeDestroy() {},
    render() {
        return (
            <div style="position: absolute">
                <svg width="100%" height="100%">
                    <defs>
                        <linearGradient
                            id="succeed"
                            x1="0%"
                            y1="0%"
                            x2="100%"
                            y2="0%"
                        >
                            <stop
                                offset="0%"
                                style="stop-color: #00e3f7"
                                stop-opacity="0.8"
                            ></stop>
                            <stop
                                offset="100%"
                                style="stop-color: #00b1fc"
                                stop-opacity="1"
                            ></stop>
                        </linearGradient>
                    </defs>
                </svg>
                <svg width="100%" height="100%">
                    <defs>
                        <linearGradient
                            id="fail"
                            x1="0%"
                            y1="0%"
                            x2="100%"
                            y2="0%"
                        >
                            <stop
                                offset="0%"
                                style="stop-color: #ff5956"
                                stop-opacity="0.8"
                            ></stop>
                            <stop
                                offset="100%"
                                style="stop-color: #f09819"
                                stop-opacity="1"
                            ></stop>
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        );
    },
};
</script>
<style scoped lang="scss"></style>

注意组件的idsucceed fail
把组件引入到需要改变的页面随便放在不影响布局的地方
最后在css

.progressSucceed ::v-deep svg > path:nth-child(2) {
    stroke: url(#succeed); //这个括号里面的就是上面的#id
}
.progressFail ::v-deep svg > path:nth-child(2) {
    stroke: url(#fail); //这个括号里面的就是上面的#id
}