深圳物流公司网站,常州网站建设公司好么,wordpress自适应画廊,女装品牌排行榜前十名前言
使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色#xff0c;问题就出现了#xff01;#xff01; 仔细看原来是两层#xff0c;默认背景色是白色。 想着把背景色改为透明应该能用#xff0c;结果发现背面是一条实线#xff0c;难怪要用白色遮挡…不符…前言
使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色问题就出现了 仔细看原来是两层默认背景色是白色。 想着把背景色改为透明应该能用结果发现背面是一条实线难怪要用白色遮挡…不符合我的需求… 实战
那就仿一个吧 Vue 组件~ 。先看效果上为 el-divider 组件下为自定义组件。当背景为白色时差异不大字体和线条颜色可自定义的 换成其它背景色就很明显 以下是全部代码
templatediv classmy-divider div classline :style{width: leftWidth} /divspan classlabel{{label}}/spandiv classline :style{width: rightWidth}/div/div
/templatescript
export default {name: MyDivider,props: {// 文字label: {type: String,default: },// 文字位置左 left右 right中 centercontentPosition: {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();}
}
/scriptstyle langstylus 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中 centerstring—center
使用
my-divider label少年包青天 /
my-divider label少年包青天 content-positionleft /
my-divider label少年包青天 content-positionright /
