12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <div class="cip-divider"
- :class="[dividerClass, proxyValue ?? 'empty-divider']"
- :style="{ width: width,
- height: config.dividerHeight,
- color: config.textColor,
- 'border-color': config.dividerColor,
- 'border-style': config.dividerType
- }">
- {{proxyValue}}
- </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 ''
- })
- const proxyValue = computed(() => {
- return props.modelValue || props.config.defaultValue
- })
- return {
- ...formInput,
- contentPosition: contentPosition.value,
- dividerClass: dividerClass.value,
- proxyValue
- }
- }
- }
- </script>
- <style lang="less">
- .cip-divider{
- display: flex;
- align-items: center;
- border-style: solid;
- border-width: 0;
- border-color: #ebedf0;
- color: #969799;
- margin: 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: 2px 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%;
- }
- &.empty-divider{
- &::before, &::after{
- margin-right: 0px;
- margin-left: 0px;
- }
- }
- }
- </style>
|