前言

使用 el-divider 背景為白色是沒問題的。

但當背景換成其它顏色，問題就出現(xiàn)了??！

仔細看原來是兩層，默認背景色是白色。

想著把背景色改為透明應該能用，結果發(fā)現(xiàn)背面是一條實線，難怪要用白色遮擋…不符合我的需求…

實戰(zhàn)

那就仿一個吧（ Vue 組件）~ 。先看效果，上為 el-divider 組件，下為自定義組件。當背景為白色時差異不大（字體和線條顏色可自定義的）：
換成其它背景色就很明顯：

以下是全部代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-762578.html

<template>
    <div class="my-divider" >
        <div class="line" :style="{width: leftWidth}" ></div>
        <span class="label">{{label}}</span>
        <div class="line" :style="{width: rightWidth}"></div>
    </div>
</template>

<script>
export default {
    name: 'MyDivider',
    props: {
        // 文字
        label: {
            type: String,
            default: ''
        },
        // 文字位置，左 left，右 right，中 center
        contentPosition: {
            type: String,
            default: 'center'
        },
    },
    watch: {
        contentPosition() {
            this.setLineWidth();
        }
    },
    data() {
        return {
            leftWidth: '50%',
            rightWidth: '50%',
        }
    },
    methods: {
        setLineWidth() {
            let p = this.contentPosition;
            switch (p) {
                case 'center': {
                    this.leftWidth = '50%';
                    this.rightWidth = '50%';
                    break;
                }
                case 'left': {
                    this.leftWidth = '10%';
                    this.rightWidth = '90%';
                    break;
                }
                case 'right': {
                    this.leftWidth = '90%';
                    this.rightWidth = '10%';
                    break;
                }                
            }
        }
    },
    mounted() {
        this.setLineWidth();
    }
}
</script>

<style lang="stylus" scoped>
.my-divider {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    margin: 15px 0;
    color: #000;
    .line {
        background: #000;
        height: 1px;
    }
    .label {
        width auto;
        padding: 0 12px;
        text-align: center;
        transform: translateY(-1px);
        white-space: nowrap;// 不換行(單行)
    }
}
</style>

屬性

使用

<my-divider label="少年包青天" />
<my-divider label="少年包青天" content-position="left" />
<my-divider label="少年包青天" content-position="right" />

到了這里，關于《Vue2.X 進階知識點》- 防 ElementUI Divider 分割線的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！