vue布局生成器_Vue插件可以快速生成Web应用程序布局
vue布局生成器
vue-ads-layout (vue-ads-layout)
This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. And each of those 4 components can be placed as a fixed component.
这是一个vue组件库，用于创建默认的Web应用程序布局。 您可以创建工具栏，页脚，左右抽屉。 并且这四个组件中的每个组件都可以作为固定组件放置。
The left and right drawers can be minified or hidden by buttons or by resizing the window (responsive design)
可以通过按钮或调整窗口大小来缩小或隐藏左右抽屉(响应式设计)
I also added two default buttons to hide and minify the drawers.
我还添加了两个默认按钮来隐藏和缩小抽屉。
安装 (Installation)
You can install the package via npm or yarn.
您可以通过npm或yarn安装软件包。
NPM (NPM)
npm install vue-ads-layout --save
npm install vue-ads-layout --save
纱 (YARN)
yarn add vue-ads-layout
yarn add vue-ads-layout
用法 (Usage)
Here you can find a simple example on how to use this layout component.
在这里，您可以找到有关如何使用此布局组件的简单示例。
My content
组件 (Components)
VueAdsLayout (VueAdsLayout)
This is the base component. All the other components need to be nested in this one by slots.
这是基本组件。 所有其他组件都需要通过插槽嵌套在此组件中。
物产 (Properties)
full-bar: (type: boolean) If true, a horizontal layout is created, where the bars overlap the drawers.full-bar： (type：boolean)如果为true，则创建水平布局，其中的条与抽屉重叠。
If false, a vertical layout is created, where the drawers overlap the bars.
如果为false，则创建垂直布局，其中抽屉与条形图重叠。
范本 (Templates)
工具栏 (toolbar)
The toolbar template is used to define the top bar. Use the VueAdsBar component for it.
工具栏模板用于定义顶部栏。 使用VueAdsBar组件。
页脚 (footer)
The footer template is used to define the footer. Use the VueAdsBar component for it with the footer option = true.
页脚模板用于定义页脚。 将VueAdsBar组件用于页脚选项= true。
左抽屉/右抽屉 (left-drawer / right drawer)
The left/right-drawer template is used to define the left/right drawer. Use the VueAdsDrawer component for it.
左/右抽屉模板用于定义左/右抽屉。 使用VueAdsDrawer组件。
默认 (default)
This is the most important template. Here you place your application content.
这是最重要的模板。 在这里放置您的应用程序内容。
Just add it as a child element between the vue-ads-layout tags.
只需将其添加为vue-ads-layout标签之间的子元素即可。
VueAdsBar (VueAdsBar)
The bar component is used to create a toolbar and a footer.
条形组件用于创建工具栏和页脚。
物产 (Properties)
fixed: (type: boolean, default: false) Indicates if the bar is positioned fixed.fixed：( 类型：布尔值，默认值：false)指示栏是否固定。height: (type: number, default: 16) If you want to increase the default height, add this option.height：( 类型：数字，默认值：16)如果要增加默认高度，请添加此选项。
Only use the valid, numeric
仅使用有效的数字Tailwindcss height options
Tailwindcss高度选项
footer: (type: boolean, default: false) Indicates if the bar is a footer.footer：( 类型：布尔值，默认值：false)指示栏是否为页脚。
范本 (Templates)
There are 2 possibilities for using the bar templates:
使用条形模板有两种可能性：
overriding the default template with a custom template.
用自定义模板覆盖默认模板。
use the predefined 3 column template:
first,middle,last.使用预定义的3列模板：
first，middle，last。
This method uses the flex css style, where the middle template has a flex-grow attribute.
此方法使用flex css样式，其中中间模板具有flex-grow属性。
For example if you want to use the VueAdsMenuButton buttons on the left/right position of the bar, use the following templates.
例如，如果您想使用工具栏左/右位置上的VueAdsMenuButton按钮，请使用以下模板。
VueAdsDrawer (VueAdsDrawer)
The drawer component is used to create a drawers on the left and right side of your screen.
抽屉组件用于在屏幕的左侧和右侧创建抽屉。
物产 (Properties)
fixed: (type: boolean, default: false) Indicates if the drawer is positioned fixed.fixed：( 类型：布尔值，默认值：false)指示抽屉是否固定。width: (type: number, default: 64) If you want to increase the default width, add this option.width：( 类型：数字，默认值：64)如果要增加默认宽度，请添加此选项。
Only use the valid, numeric
仅使用有效的数字Tailwindcss width options
Tailwindcss宽度选项
minified-width: (type: number, default: 16) If you want to increase the minified width, add this option.minified-width：( 类型：数字，默认值：16)如果要增加最小宽度，请添加此选项。
Only use the valid, numeric
仅使用有效的数字Tailwindcss width options
Tailwindcss宽度选项
minified: (type: boolean, default: false) Indicates if the drawer is minified.minified：( 类型：布尔值，默认值：false)指示抽屉是否缩小。hidden: (type: boolean, default: false) Indicates if the drawer is hidden.hidden： (type：boolean，default：false)指示抽屉是否隐藏。responsive-minified: (type: array, default: ['all', 'sm']) A list of all Tailwindcss screen sizesresponsive-minified：( 类型：数组，默认值：['all'，'sm'])所有Tailwindcss屏幕尺寸的列表
where the drawer has to be minified.
必须缩小抽屉的地方。responsive-hidden: (type: array, default: ['all']) A list of all Tailwindcss screen sizesresponsive-hidden：( 类型：数组，默认值：['all'])所有Tailwindcss屏幕尺寸的列表
where the drawer has to be hidden.
抽屉必须隐藏的地方。
大事记 (Events)
minify: Emitted if the drawer is minified.minify：如果抽屉变小则发射。minified:minified： (type: boolean) Indicates if the drawer is minified.(type：boolean)指示抽屉是否被缩小。
hide: Emitted if the drawer is hidden.hide：如果抽屉是隐藏的，则发出。hidden:hidden： (type: boolean) Indicates if the drawer is hidden.(type：boolean)指示抽屉是否隐藏。
范本 (Templates)
There are 2 possibilities for using the drawer templates:
有两种使用抽屉模板的可能性：
overriding the default template with a custom template.
用自定义模板覆盖默认模板。
use the predefined 2 rows template:
top,bottom.使用预定义的2行模板：
top，bottom。
This method uses the flex css style, where the top template has a flex-grow attribute.
此方法使用flex css样式，其中顶部模板具有flex-grow属性。
All the slots (default, top and bottom) are scoped with the following variables:
所有插槽(默认，顶部和底部)的作用域均包含以下变量：
fixed: (type: boolean) Indicates if the drawer is positioned fixed.fixed： (type：boolean)指示抽屉是否固定。minified: (type: boolean) Indicates if the drawer is minified.minified： (type：boolean)指示抽屉是否被缩小。hidden: (type: boolean) Indicates if the drawer is hidden.hidden： (type：boolean)指示抽屉是否隐藏。hidden: (type: boolean) Indicates if the drawer is hidden.hidden： (type：boolean)指示抽屉是否隐藏。width: (type: number) the current numeric tailwindcss widthwidth： (type：number)当前数值的tailwindcss宽度
For example if you want to use the VueAdsMinifyButton on the bottom of the bar to minify it, use the following template.
例如，如果您要使用工具栏底部的VueAdsMinifyButton来缩小尺寸，请使用以下模板。
VueAdsMenuButton (VueAdsMenuButton)
A menu button that can be used to open or close the drawers.
可以用来打开或关闭抽屉的菜单按钮。
If you want to use the font awesome icons, don't forget to import the css library. It's a dependency of this library so it's automatically installed.
如果要使用字体真棒图标，请不要忘记导入css库。 它是该库的依赖项，因此会自动安装。
物产 (Properties)
hidden: (type: boolean, required) Indicates if the linked drawer is hidden or not.hidden：( 类型：布尔值，必需)指示链接的抽屉是否隐藏。
大事记 (Events)
toggle: Emitted if the button is clicked.toggle：如果单击按钮，则发射。hidden:hidden： (type: boolean) Indicates if the drawer is hidden.(type：boolean)指示抽屉是否隐藏。
范本 (Templates)
You can add a default template to override the default icon.
您可以添加默认模板以覆盖默认图标。
VueAdsMinifyButton (VueAdsMinifyButton)
A minify button that can be used to minify the drawers.
缩小按钮，可用于缩小抽屉。
If you want to use the font awesome icons, don't forget to import the css library. It's a dependency of this library so it's automatically installed.
如果要使用字体真棒图标，请不要忘记导入css库。 它是该库的依赖项，因此会自动安装。
物产 (Properties)
minified: (type: boolean, required) Indicates if the linked drawer is minified or not.minified：( 类型：布尔值，必需)指示链接的抽屉是否已缩小。right: (type: boolean, default: false) Indicates if the button is used for the right drawer.right：( 类型：布尔值，默认值：false)指示按钮是否用于右侧抽屉。
If so the arrows are flipped.
如果是这样，则将箭头翻转。
大事记 (Events)
toggle: Emitted if the button is clicked.toggle：如果单击按钮，则发射。minified:minified： (type: boolean) Indicates if the drawer is minified.(type：boolean)指示抽屉是否被缩小。
范本 (Templates)
You can add a default template to override the default icon.
您可以添加默认模板以覆盖默认图标。
测试中 (Testing)
Needs to be done. You can run all the test (currently zero) by executing the following command.
需要做的。 您可以通过执行以下命令来运行所有测试(当前为零)。
npm run test:unit翻译自: https://vuejsexamples.com/a-vue-plugin-to-quickly-generate-a-webapplication-layout/
vue布局生成器