FlexBox Component For Vue3
简介 | Description
基于vue3开发的FlexBox组件。
A flex-box component developed based on vue3.
使用 | Usage
基本使用
安装 | Install
npm i @alanlee97/vue3-flex-box
引入组件 | Import Component
在需要使用flex-box组件的地方引入。
In the place where you need to use the flex - box component into it.
import FlexBox from '@alanlee97/vue3-flex-box';
或者全局引入,在main.ts中引入组件。
Or you can globally import flex-box, import it in main.ts.
import { createApp } from 'vue'
import FlexBox from '@alanlee97/vue3-flex-box';
import '@alanlee97/vue3-flex-box/dist/style.css';
const app = createApp(App);
app.component('flex-box', FlexBox);
app.mount('#app');
引入样式 | Import Style
在main.ts中引入样式。
Import style file in main.ts.
import '@alanlee97/vue3-flex-box/dist/style.css';
验证是否生效 | Validation
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import FlexBox from '@alanlee97/vue3-flex-box';
</script>
<template>
<FlexBox space-between>
<div>1</div>
<div>2</div>
</FlexBox>
</template>
可以看到效果,组件生效了。
You can see that the component works.
通过v-flex指令使用flex-box | Use flex-box with v-flex directive
注册v-flex指令 | Register v-flex directive
import { createApp } from 'vue'
import App from './App.vue'
import '@alanlee97/vue3-flex-box/dist/style.css';
import { vFlex } from '@alanlee97/vue3-flex-box';
const app = createApp(App);
app.directive('flex', vFlex);
app.mount('#app');
通过指令修饰符的方式控制flex的效果 | Control the effect of flex by directive modifiers
<div v-flex.space-between>
<div>1</div>
<div>2</div>
</div>
<div v-flex.between.wrap.center-v>
<div>1</div>
<div>2</div>
</div>
FlexBox属性 | Attributes
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
height | string | number | 盒子的高度 Height of box |
|
width | string | number | 盒子的宽度 Width of box |
|
centerH | boolean | false | 元素水平居中 Center element horizontally |
centerV | boolean | false | 元素垂直居中 Center elements vertically |
centerHV | boolean | false | 元素水平垂直居中 Center elements horizontally and vertically |
spaceBetween | boolean | false | 元素两边对齐 Align elements on both sides |
between | boolean | false | spaceBetween的属性简写(别名),元素两边对齐 The attribute abbreviation (alias) of spaceBetween |
spaceAround | boolean | false | 元素两边间距环绕 The spacing between two sides of the element is half of the other spacing |
around | boolean | false | spaceAround的属性简写(别名),元素两边间距环绕 Attribute abbreviation (alias) of spaceAround |
spaceEvenly | boolean | false | 元素间距均等 Space elements equally |
evenly | boolean | false | spaceEvenly的属性简写(别名),元素间距均等 Attribute abbreviation (alias) of spaceEvenly |
directionRow | boolean | false | flex-box的方向,水平方向 Direction of flex box, horizontal-direction |
directionR | boolean | false | directionRow的属性简写(别名),flex-box的方向,水平方向 Attribute abbreviation (alias) of directionRow |
horizontal | boolean | false | directionRow的别名,flex-box的方向,水平方向 Attribute abbreviation (alias) of directionRow |
directionColumn | boolean | false | flex-box的方向,垂直方向 Direction of flex box, vertical-direction |
directionC | boolean | false | directionColumn的属性简写(别名),flex-box的方向,垂直方向 Attribute abbreviation (alias) of directionColumn |
vertical | boolean | false | directionColumn的别名,flex-box的方向,垂直方向 Attribute abbreviation (alias) of directionColumn |
direction | string | 手动指定flex-box的方向,同css的flex-direction的取值 Manually specify the direction of the flex box |
|
itemAlignStart | boolean | false | 元素排布的位置,从开端位置排列 The position of element arrangement, arranged from the beginning |
itemAlignEnd | boolean | false | 元素排布的位置,从末端位置排列 The position of the element arrangement, arranged from the end position |
flexNum | boolean | flex的占比数,同css的flex属性的取值 Flex number |
|
wrap | boolean | false | 是否换行 Whether the element wraps |
类型定义 | Type
interface FlexBoxProps {
height?: string | number
width?: string | number
centerH?: boolean
centerV?: boolean
centerHV?: boolean
spaceBetween?: boolean
between?: boolean // the alias of spaceBetween
spaceAround?: boolean
around?: boolean // the alias of spaceAround
spaceEvenly?: boolean
evenly?: boolean // the alias of spaceEvenly
directionRow?: boolean
directionR?: boolean // the alias of directionRow
horizontal?: boolean // the alias of directionRow
directionColumn?: boolean
directionC?: boolean // the alias of directionColumn
vertical?: boolean // the alias of directionColumn
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
itemAlignStart?: boolean
itemAlignEnd?: boolean
flexNum?: number
wrap?: boolean
}