@alanlee97/vue3-flex-box v0.0.4

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

类型定义 | 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
}