间隔容器

IntervalContainer 使用

间隔容器

查看代码

调用示例

<template>
  <IntervalContainer>
    <a-button type="primary">搜索</a-button>
    <a-button>重置</a-button>
  </IntervalContainer>
</template>
<script lang="ts" setup>
import { IntervalContainer } from './IntervalContainer'
</script>

源代码

/**
 * 用于给容器内的所有子元素添加一个水平间隔和垂直间隔
 * 默认：gutter={[10, 4]}，props传ant-row的props
 * 通过每一个子元素名为colProps的props设置Col组件的props
 */
export const IntervalContainer: FunctionalComponent<
  RowProps & { commonColProps?: { [x: number]: any } }
> = (props, { slots }) => {
  const childrens = slots?.default?.() as VNode[]
  const { commonColProps, ...rowProps } = props
  return h(Row, { class: 'interval-container', gutter: [10, 4], ...rowProps }, () =>
    childrens
      // v-if的空子节点的children在目前版本里是v-if
      .filter(c => c.children != 'v-if')
      .map(child =>
        // @ts-ignore 子元素没有此选项colProps，但支持
        h(Col, { ...commonColProps, ...child.colProps }, () => h(child))
      )
  )
}

源代码依赖

import { Col, Row, type RowProps } from 'ant-design-vue'
import { h, type FunctionalComponent, type VNode } from 'vue'

TwoSidesIntervalContainer 使用

左右间隔容器，一个靠左，一个靠右

效果

查看代码

调用示例

<template>
  <TwoSidesIntervalContainer>
    <IntervalContainer>
      <a-button type="primary">搜索</a-button>
      <a-button>重置</a-button>
    </IntervalContainer>
    <a-button type="primary">添加</a-button>
  </TwoSidesIntervalContainer>
</template>
<script lang="ts" setup>
import { IntervalContainer, TwoSidesIntervalContainer } from './IntervalContainer'
</script>

源代码

/**
 * 两侧的间隔容器，中间部分自适应,只取头两个子元素
 * 可以搭配IntervalContainer使用，默认从左到右
 */
export const TwoSidesIntervalContainer: FunctionalComponent<RowProps> = (props, { slots }) => {
  const Content = slots?.default?.() as VNode[]
  return h(
    Row,
    {
      class: 'two-sides-interval-container',
      type: 'flex',
      gutter: [10, 4],
      ...props
    },
    () => [h(Col, () => Content[0]), h(Col, { flex: 1 }), h(Col, () => Content[1])]
  )
}

源代码依赖

import { Col, Row, type RowProps } from 'ant-design-vue'
import { h, type FunctionalComponent, type VNode } from 'vue'