<template> <view class="tui-divider" :style="{ height: height + 'rpx' }"> <view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view> <view class="tui-divider-text" :style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }" > <slot></slot> </view> </view> </template> <script> export default { name: 'tuiDivider', props: { //divider占据高度 height: { type: Number, default: 100 }, //divider宽度,可填写具体长度,如400rpx width: { type: String, default: '100%' }, //divider颜色,如果为渐变线条,此属性失效 dividerColor: { type: String, default: '#e5e5e5' }, //文字颜色 color: { type: String, default: '#999' }, //文字大小 rpx size: { type: Number, default: 24 }, bold: { type: Boolean, default: false }, //背景颜色,和当前页面背景色保持一致 backgroundColor: { type: String, default: '#fafafa' }, //是否为渐变线条,为true,divideColor失效 gradual: { type: Boolean, default: false }, //渐变色值,to right ,提供两个色值即可,由浅至深 gradualColor: { type: Array, default: function() { return ['#eee', '#ccc']; } } }, methods: { getBgColor: function(gradual, gradualColor, dividerColor) { let bgColor = dividerColor; if (gradual) { bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' + gradualColor[1] + ',' + gradualColor[0] + ')'; } return bgColor; } } }; </script> <style scoped> .tui-divider { width: 100%; position: relative; text-align: center; display: flex; justify-content: center; align-items: center; box-sizing: border-box; overflow: hidden; } .tui-divider-line { position: absolute; height: 1rpx; top: 50%; left: 50%; -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0); transform: scaleY(0.5) translateX(-50%) translateZ(0); } .tui-divider-text { position: relative; text-align: center; padding: 0 18rpx; z-index: 1; } </style>