XContainer 容器

示例

基础用法

XContainer 容器 的基本用法

<template>
  <XContainer
    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Error distinctio
    magni dignissimos accusamus consequatur voluptate eius iure ipsa numquam
    maiores eaque cum vero voluptatem, adipisci reprehenderit sit quibusdam
    iusto earum!</XContainer
  >
</template>
<script lang="ts" setup>
  import { XContainer } from '@vtj/ui';
</script>

定义 组件渲染html标签:span、 尺寸 、overflow:hidden

<template>
  <XContainer
    class="XContainer"
    tag="span"
    width="200px"
    height="100px"
    overflow="hidden"
    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
    accusantium aliquam porro, totam, iste temporibus error in praesentium
    aperiam rerum quo perspiciatis sapiente labore laudantium dolore, tenetur
    minus quidem quasi.</XContainer
  >
</template>
<script lang="ts" setup>
  import { XContainer } from '@vtj/ui';
</script>

<style scoped>
  .XContainer {
    background-color: seagreen;
    color: white;
  }
</style>

定义 Flex 布局

<template>
  <div class="page">
    <XContainer>
      <div class="divEl yellow">1</div>
      <div class="divEl salmon">2</div>
      <div class="divEl violet">3</div>
    </XContainer>

    <XContainer wrap="wrap">
      <XContainer class="divEl w-50 yellow">1</XContainer>
      <XContainer class="divEl w-50 salmon">2</XContainer>
      <XContainer class="divEl w-50 violet">3</XContainer>
    </XContainer>

    <XContainer :flex="true" direction="column">
      <XContainer class="divEl w-24 yellow">1</XContainer>
      <XContainer class="divEl w-24 salmon">2</XContainer>
      <XContainer class="divEl w-24 violet">3</XContainer>
    </XContainer>

    <XContainer
      :flex="true"
      direction="column"
      justify="center"
      align="flex-end"
      :gap="true">
      <XContainer class="divEl w-24 yellow">1</XContainer>
      <XContainer class="divEl w-24 salmon">2</XContainer>
      <XContainer class="divEl w-24 violet">3</XContainer>
    </XContainer>
  </div>
</template>
<script lang="ts" setup>
  import { XContainer } from '@vtj/ui';
</script>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .divEl {
    width: 100%;
    height: 30px;
    background: #000;
  }

  .yellow {
    background-color: yellowgreen;
  }
  .salmon {
    background-color: salmon;
  }

  .violet {
    background-color: violet;
  }

  .w-24 {
    width: 500px;
  }

  .w-50 {
    width: 40%;
  }
</style>

定义 放大 缩小

<template>
  <div class="page">
    <XContainer>
      <XContainer class="divEl w-24 yellow">1</XContainer>
      <XContainer class="divEl w-24 salmon">2</XContainer>
    </XContainer>

    <XContainer>
      <XContainer class="divEl w-24 yellow">正常</XContainer>
      <XContainer class="divEl w-24 salmon" :grow="true">放大</XContainer>
    </XContainer>

    <XContainer width="300px">
      <XContainer class="divEl w-24 yellow">正常</XContainer>
      <XContainer class="divEl w-24 salmon" :shrink="true">缩小</XContainer>
    </XContainer>
  </div>
</template>
<script lang="ts" setup>
  import { XContainer } from '@vtj/ui';
</script>

<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .divEl {
    width: 100%;
    height: 30px;
    background: #000;
  }

  .yellow {
    background-color: yellowgreen;
  }
  .salmon {
    background-color: salmon;
  }

  .violet {
    background-color: violet;
  }

  .w-24 {
    width: 200px;
  }
</style>

全部用法

<template>
  <div class="page">
    <XContainer
      tag="div"
      :flex="true"
      direction="column"
      :gap="true"
      :grow="true"
      :padding="true"
      :autoPointer="true">
      <XContainer tag="h1" class="el yellow">这是个h1 标签</XContainer>
      <XContainer tag="span" class="el salmon" alignSelf="flex-end"
        >这是个 span 标签</XContainer
      >
      <XContainer
        tag="p"
        class="el violet"
        width="300px"
        height="50px"
        :autoPointer="true"
        @click="onClick"
        >这是个 p 标签</XContainer
      >
    </XContainer>
  </div>
</template>
<script lang="ts" setup>
  import { XContainer } from '@vtj/ui';

  const onClick = () => {};
</script>

<style scoped>
  .yellow {
    background-color: yellowgreen;
  }
  .salmon {
    background-color: salmon;
  }

  .violet {
    background-color: violet;
  }
</style>

API

属性

属性名	说明	类型	默认值
tag	组件渲染html标签	string	div
fit	宽高自适应	boolean	false
width	指定高度，fit 为true 失效	string | number	-
height	指定高度，fit 为true失效	string | number	-
flex	开启flex布局	boolean	-
inline	inline-flex	boolean	-
direction	flex主轴方向	string	row
wrap	换行	string	nowrap
justify	主轴上的对齐方式	string	flex-start
align	交叉轴上对齐方式	string	flex-start
alignContent	多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.(即 flex-wrap="nowrap")	string	stretch
grow	放大	boolean	false
shrink	缩小	boolean	false
alignSelf	单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性	string	auto
overflow	css overflow	string	-
padding	内边距	boolean	false
gap	嵌套子组件加间隔	boolean	-
autoPointer	cursor-pointer	boolean	-