{"_id":"@alanlee97/vue3-flex-box","_rev":"4-d2e08b3a853d98cccf7cc98cb4038b20","name":"@alanlee97/vue3-flex-box","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@alanlee97/vue3-flex-box","version":"0.0.1","module":"./dist/flex-box.es.ts","main":"./dist/flex-box.umd.ts","exports":{".":{"import":"./dist/flex-box.es.ts","require":"./dist/flex-box.umd.ts"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview"},"dependencies":{"vue":"^3.2.25"},"devDependencies":{"@types/node":"^17.0.6","@vitejs/plugin-vue":"^2.0.0","sass":"^1.45.2","typescript":"^4.4.4","vite":"^2.7.2","vue-tsc":"^0.29.8"},"description":"This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `\n\n\n \n 1
\n 2
\n \n\n```\n\n可以看到效果，组件生效了。\n\nYou can see that the component works.\n\n\n\n\n\n### 通过v-flex指令使用flex-box | Use flex-box with v-flex directive\n\n**注册v-flex指令 | Register v-flex directive**\n\n```typescript\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport '@alanlee97/vue3-flex-box/dist/style.css';\nimport { vFlex } from '@alanlee97/vue3-flex-box';\n\nconst app = createApp(App);\napp.directive('flex', vFlex);\napp.mount('#app');\n```\n\n\n\n**通过指令修饰符的方式控制flex的效果 | Control the effect of flex by directive modifiers**\n\n```vue\n\n\n\n```\n\n\n\n## FlexBox属性 | Attributes\n\n| 属性 | 类型 | 默认值 | 说明 |\n| --------------- | ---------------- | ------ | ------------------------------------------------------------ |\n| height | string \\| number | | 盒子的高度
Height of box |\n| width | string \\| number | | 盒子的宽度
Width of box |\n| centerH | boolean | false | 元素水平居中
Center element horizontally |\n| centerV | boolean | false | 元素垂直居中
Center elements vertically |\n| centerHV | boolean | false | 元素水平垂直居中
Center elements horizontally and vertically |\n| spaceBetween | boolean | false | 元素两边对齐
Align elements on both sides |\n| between | boolean | false | spaceBetween的属性简写（别名），元素两边对齐
The attribute abbreviation (alias) of spaceBetween |\n| spaceAround | boolean | false | 元素两边间距环绕
The spacing between two sides of the element is half of the other spacing |\n| around | boolean | false | spaceAround的属性简写（别名），元素两边间距环绕
Attribute abbreviation (alias) of spaceAround |\n| spaceEvenly | boolean | false | 元素间距均等
Space elements equally |\n| evenly | boolean | false | spaceEvenly的属性简写（别名），元素间距均等
Attribute abbreviation (alias) of spaceEvenly |\n| directionRow | boolean | false | flex-box的方向，水平方向
Direction of flex box, horizontal-direction |\n| directionR | boolean | false | directionRow的属性简写（别名），flex-box的方向，水平方向
Attribute abbreviation (alias) of directionRow |\n| horizontal | boolean | false | directionRow的别名，flex-box的方向，水平方向
Attribute abbreviation (alias) of directionRow |\n| directionColumn | boolean | false | flex-box的方向，垂直方向
Direction of flex box, vertical-direction |\n| directionC | boolean | false | directionColumn的属性简写（别名），flex-box的方向，垂直方向
Attribute abbreviation (alias) of directionColumn |\n| vertical | boolean | false | directionColumn的别名，flex-box的方向，垂直方向
Attribute abbreviation (alias) of directionColumn |\n| direction | string | | 手动指定flex-box的方向，同css的flex-direction的取值
Manually specify the direction of the flex box |\n| itemAlignStart | boolean | false | 元素排布的位置，从开端位置排列
The position of element arrangement, arranged from the beginning |\n| itemAlignEnd | boolean | false | 元素排布的位置，从末端位置排列
The position of the element arrangement, arranged from the end position |\n| flexNum | boolean | | flex的占比数，同css的flex属性的取值
Flex number |\n| wrap | boolean | false | 是否换行
Whether the element wraps |\n\n\n\n## 类型定义 | Type\n\n```ts\ninterface FlexBoxProps {\n height?: string | number\n width?: string | number\n centerH?: boolean\n centerV?: boolean\n centerHV?: boolean\n spaceBetween?: boolean\n between?: boolean // the alias of spaceBetween\n spaceAround?: boolean\n around?: boolean // the alias of spaceAround\n spaceEvenly?: boolean\n evenly?: boolean // the alias of spaceEvenly\n directionRow?: boolean\n directionR?: boolean // the alias of directionRow\n horizontal?: boolean // the alias of directionRow\n directionColumn?: boolean\n directionC?: boolean // the alias of directionColumn\n vertical?: boolean // the alias of directionColumn\n direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'\n itemAlignStart?: boolean\n itemAlignEnd?: boolean\n flexNum?: number\n wrap?: boolean\n}\n```\n\n","readmeFilename":"README.md","homepage":"https://github.com/AlanLee97/vue3-flex-box"}