86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<view class="container" :style="{padding: linePadding}">
|
|
<!-- 带文字的分割线 -->
|
|
<view class="divider" :style="{margin: lineMargin,width: width}">
|
|
<view class="line" :style="{height: lineHeight,backgroundColor: lineColor}"></view>
|
|
<text :style="{padding: textPadding,fontSize: fontSize,color: fontColor,fontWeight: fontWeight}">{{ lineText }}</text>
|
|
<view class="line" :style="{height: lineHeight,backgroundColor: lineColor,}"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: "DividerText",
|
|
props: {
|
|
|
|
// 线边距
|
|
linePadding: {
|
|
type: String,
|
|
default: '10rpx 0'
|
|
},
|
|
//线距离上面的距离
|
|
lineMargin: {
|
|
type: String,
|
|
default: '30rpx 0'
|
|
},
|
|
// 分割线粗细
|
|
lineHeight: {
|
|
type: String,
|
|
default: '1rpx'
|
|
},
|
|
// 分割线颜色
|
|
lineColor: {
|
|
type: String,
|
|
default: '#e5e5e5'
|
|
},
|
|
// 字体距离分割线中间的距离
|
|
textPadding: {
|
|
type: String,
|
|
default: '0 20rpx'
|
|
},
|
|
// 字体大小
|
|
fontSize: {
|
|
type: String,
|
|
default: '28rpx'
|
|
},
|
|
// 字体颜色
|
|
fontColor: {
|
|
type: String,
|
|
default: '#999'
|
|
},
|
|
// 字体粗细
|
|
fontWeight: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
// 分割线文字
|
|
lineText: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.line {
|
|
flex: 1
|
|
}
|
|
</style> |