lc-vue-flex

选择器样式组件

常用场景：

• 配合 element-plus 中的 table 组件实现动态容器固定表头

Demo

demo

安装

npm i lc-vue-flex 

例子

<template>
  <div>
    <p>base</p>
    <div style='width: 500px; height: 50px; border: 1px solid;'>
      <flex fit>
        <flex align-items='center' style='border: 1px solid;'>
          1
        </flex>
        <flex justify-content='center' style='border: 1px solid;'>
          2
        </flex>
        <flex justify-content='center' align-items='center' style='border: 1px solid;'>
          3
        </flex>
      </flex>
    </div>
    <p>direction='column'</p>
    <div style='width: 50px; height: 500px; border: 1px solid;'>
      <flex fit direction='column'>
        <flex align-items='center' style='border: 1px solid;'>
          1
        </flex>
        <flex justify-content='center' style='border: 1px solid;'>
          2
        </flex>
        <flex justify-content='center' align-items='center' style='border: 1px solid;'>
          3
        </flex>
      </flex>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Flex } from '@/index.ts';
</script>

API

Flex

Attributes

属性名	说明	类型	默认值
fit	width/height自适应	boolean	false
width	宽度	String	-
height	高度	String	-
overflow	overflow	'auto' | 'hidden'	'hidden'
display	display	'flex' | 'inline-flex'	'flex'
direction	同flex-direction	-	-
wrap	同flex-wrap	-	-
basis	同flex-basis	-	-
grow	同flex-grow	-	-
shrink	同flex-shrink	-	-
flex	同flex	-	-
alignItems	同align-items	-	-
justifyContent	同justify-content	-	-

Slots

插槽名	说明	参数
default	内容	-