<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>