XContainer 容器

示例

基础用法

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!

<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

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.

<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 布局

1

2

3

1

2

3

1

2

3

1

2

3

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

定义 放大 缩小

1

2

正常

放大

正常

缩小

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

全部用法

这是个h1 标签

这是个 span 标签

这是个 p 标签

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