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