VueJS flexbox可分区布局 - vue-flex-layout

VueJS flexbox可分区布局 - vue-flex-layout
插件名称 vue-flex-layout
发布时间 2021年5月7日
插件作者 joseporto

VueJS flexbox可分区布局。

安装方式

yarn add @jporto/vue-flex-layout

或者

npm install @jporto/vue-flex-layout

设置

Vue.js

  • 将以下内容添加到您的应用程序main.js文件中:
import VueFlexLayout from '@jporto/vue-flex-layout'

Vue.use(VueFlexLayout)

导入样式

@import '@jporto/vue-flex-layout/dist/@jporto/main.scss';

NuxtJS

  • 与Vue.js类似,但我建议向components.js插件添加文件,内容如下:
import Vue from 'vue'
import VueFlexLayout from '@jporto/vue-flex-layout';
Vue.use(VueFlexLayout);

nuxt.config.js以下位置注册插件:

plugins: [
  '@/plugins/components',
],

配置

注意:配置仍处于实验阶段。

在导入main.scss文件之前,请覆盖以下变量:

变量名描述默认
$ layout-max-width非液体容器的最大宽度1420
$layout-columns最大列数12
$layout-gutter装订线大小(以像素为单位)16
$layout-color-debug-containercontainer处于debug模式时的基本颜色rgb(57,169,219)
$layout-color-debug-rowrow处于debug模式时的基本颜色RGB(163,221,122)
$layout-color-debug-columncolumn处于debug模式时的基本颜色RGB(242,103,48)
$layout-color-guide-right-limit列指南最右边限制的颜色#ED0579
$layout-color-guide-left-limit列指南最左侧限制的颜色#01ABA3
$layout-color-guide-column代表每列限制的行的颜色透明化(#F06925,.2)
$layout-color-guide-gutter代表每个列装订线的线的颜色透明化(#0071BD,.9)
$layout-guides-zindex指导基本z-index2147483647