FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/subPages/pages/commitment/commitmentDetail/components/DividerComponents.vue

<script>
export default {
  name: "DividerComponents",
  props: {
    index: {
      type: Number,
      default: -1
    }
  },
  computed: {
    configInfo: {
      get() {
        return this.$store.state.template.templateJson.components[this.index]
      },
    },
    configList: {
      get() {
        return this.$store.state.template.templateJson.components[this.index]
            && this.$store.state.template.templateJson.components[this.index].config
      },
    },
    borderStyle() {
      //获取线段大小
      const size = this.configList[0].value >= 1 && this.configList[0].value <= 5 ? this.configList[0].value : 1;
      // 获取线段类型
      const typeValue = this.configList && this.configList[1].value
      return `${size}px ${typeValue} #ebeef5`
    }
  }
}
</script>

<template>
  <view
      class="divider-style"
  >
    <view
        :style="{
        margin: '10px 0',
        borderBottom: borderStyle
      }"
    >
    </view>
  </view>
</template>

<style scoped lang="scss">
.divider-style {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //border: 1px solid #ebeef5;
  padding:5px;
  margin: 10px 0;
  div {
    width: 100%;
  }
}
</style>