cip-components/cip-form-input/basic/divider/index.vue

<template>
  <div class="cip-divider"
    :class="dividerClass"
    :style="{ width: width,
      height: config.dividerHeight,
      color: config.textColor,
      'border-color': config.dividerColor
    }">
    {{modelValue || config.defaultValue}}
  </div>
</template>
<script>
import { computed } from 'vue'
import { formInputProps } from '../../form-input-props'
import { useFormInput } from '@cip/components/hooks/form-input'
export default {
  props: formInputProps,
  setup (props, context) {
    const formInput = useFormInput(props, context)
    const contentPosition = computed(() => {
      return props.config?.contentPosition ?? 'center'
    })
    const dividerClass = computed(() => {
      if (contentPosition.value === 'left') return 'divider-left'
      if (contentPosition.value === 'right') return 'divider-right'
      return ''
    })
    return {
      ...formInput,
      contentPosition: contentPosition.value,
      dividerClass: dividerClass.value
    }
  }
}
</script>
<style lang="less">
.cip-divider{
  display: flex;
  align-items: center;
  border-style: solid;
  border-width: 0;
  border-color: #ebedf0;
  color: #969799;
  margin: 16px 0;
  font-size: 14px;
  line-height: 24px;
  &::before, &::after{
    display: block;
    flex: 1;
    box-sizing: border-box;
    height: 1px;
    border-color: inherit;
    border-style: inherit;
    border-width: var(--van-border-width-base) 0 0;
    transform: scaleY(.5);
    content: "";
  }
  &::before{
    margin-right: 16px;
  }
  &::after{
    margin-left: 16px;
  }
  &.divider-left::before{
    max-width: 10%;
  }
  &.divider-right::after{
    max-width: 10%;
  }
}
</style>