前言
使用 el-divider 背景为白色是没问题的。
但当背景换成其它颜色，问题就出现了！！
仔细看原来是两层，默认背景色是白色。
想着把背景色改为透明应该能用，结果发现背面是一条实线，难怪要用白色遮挡…不符合我的需求…
文章来源：https://www.toymoban.com/news/detail-762578.html
实战
那就仿一个吧（ Vue 组件）~ 。先看效果，上为 el-divider 组件，下为自定义组件。当背景为白色时差异不大（字体和线条颜色可自定义的）：
换成其它背景色就很明显：
以下是全部代码文章来源地址https://www.toymoban.com/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>
属性
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| label | 文字 | string | — | — |
| content-position | 文字位置，左 left，右 right，中 center | string | — | center |
使用
<my-divider label="少年包青天" />
<my-divider label="少年包青天" content-position="left" />
<my-divider label="少年包青天" content-position="right" />
到了这里，关于《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
