<template>
  <view class="divider" :style="{ margin: margin }">
    <view
        :style="{
        backgroundColor: color,
        height: thickness + 'rpx',
        width: hasMargin ? 'calc(100% - ' + sideMargin + 'rpx)' : '100%'
      }"
    ></view>
  </view>
</template>

<script>
export default {
  name: "Divider",
  props: {
    // 分割线颜色
    color: {
      type: String,
      default: "#e5e5e5"
    },
    // 分割线厚度
    thickness: {
      type: Number,
      default: 1
    },
    // 上下外边距（如："20rpx 0"）
    margin: {
      type: String,
      default: "20rpx 0"
    },
    // 是否有左右边距
    hasMargin: {
      type: Boolean,
      default: false
    },
    // 左右边距大小
    sideMargin: {
      type: Number,
      default: 40
    }
  }
};
</script>

<style scoped>
.divider {
  width: 100%;
  display: flex;
  justify-content: center;
}


</style>