vue手机端布局纵向布局_Vue中的黄金布局集成

vue手机端布局纵向布局

金色的布局 (vue-golden-layout)

Integration of the golden-layout to Vue.

将黄金布局整合到Vue。

安装 (Installation)

npm install --save vue-golden-layout

In order to test, after cloning, a static application can be compiled :

为了测试，在克隆之后，可以编译一个静态应用程序：

npm install
npm fuse
npm run test/compile

The file dist/index.html then shows test/test.vue in action

文件dist / index.html然后显示test / test.vue的运行情况

例 (Example)

	
		
			
CompA
		
		
			...
		
		
			...
		
	

不要忘了让它起作用 (Don't forget in order to make it work)

• Include a golden-layout theme CSS.

  包括一个金色布局主题CSS。

import 'golden-layout/src/css/goldenlayout-light-theme.css'

goldenlayout-base.css is already integrated to the library.

goldenlayout-base.css已集成到库中。

用法 (Usage)

This library integrate a straightforward way bundling with fuse-box. If you make a project with this bundler, it will be straight-forward.

该库将直接方法与保险丝盒捆绑在一起。 如果使用此捆绑器创建项目，它将很简单。

import vgl from 'vue-golden-layout'
Vue.use(vgl);

In case of incompatibility with bundlers, you can bundle vue-golden-layout by simply bundling the sources. The sources entry point is in vue-golden-layout/src/index.ts

如果与捆绑器不兼容，则可以通过简单地捆绑源来捆绑vue-golden-layout 。 源入口点在vue-golden-layout/src/index.ts

import vgl from 'vue-golden-layout/src'
Vue.use(vgl);

The objects are differentiated into : The layout object (golden), the container objects (golden and glRow, glCol and glStack), the contained objects (glRow, glCol and glStack and glComponent).

这些对象分为：布局对象(金色)，容器对象(golden和glRow，glCol和glStack)，包含的对象(glRow，glCol和glStack和glComponent)。

命名模板 (Named templates)

In order to use v-if and v-for to control the content, templates have to be defined and used with a name. If this rule is broken :

为了使用v-if和v-for来控制内容，必须定义模板并使用其名称。 如果此规则被违反：

• Popup will display blank

  弹出窗口将显示为空白

• Loading a saved state will fail

  加载保存的状态将失败

• This will be displayed in your console: "Dynamic golden-layout components should be named templates instead."

  这将显示在您的控制台中：“应将动态黄金布局组件命名为模板。”

定义模板 (Defining a template)

This is done through slots in the element (the square brackets stand for "optional")

这是通过元素中的slot s完成的(方括号代表“可选”)

The content of myState can of course be changed. This will be saved/loaded when the overall state is saved/loaded.

myState的内容当然可以更改。 当整体状态被保存/加载时，将被保存/加载。

使用模板 (Using a template)

gl-component has a template property. This is a string that target the slot defined. It also (useful for v-fors) has a state property that will be used as the slot-scope

gl-component具有template属性。 这是针对已定义slot的字符串。 它还(对v-for有用)具有一个state属性，该属性将用作slot-scope

物产 (Properties)

包含的对象 (Contained objects)

title: string
width: number
height: number
closable: boolean
hidden: boolean

保存/恢复状态 (Saving/restoring states)

The golden-layout as the golden-router both have a property and an event named state.

作为golden-router的golden-layout既有一个属性，又有一个名为state的事件 。

• The event is triggered when the state has changed (even deeply, like a deep watch).

  状态发生变化时(甚至像手表一样深)，将触发事件。

• The property is used at mount to initialise the configuration. After that, any change will have no effect.

  该属性在安装时用于初始化配置。 之后，任何更改都将无效。

低级功能 (Low-level functionalities)

CSS (CSS)

The glComponent answers to this class to fit in the layout child container, that you can override

glComponent回答此类，以适合布局子容器，您可以覆盖它

.glComponent
	width 100%
	height 100%
	overflow auto

大事记 (Events)

布局 (Layout)

Straight forwards from golden-layout, refer to their doc

从黄金布局直截了当，请参阅其文档

itemCreated
stackCreated
rowCreated
tabCreated
columnCreated
componentCreated
selectionChanged
windowOpened
windowClosed
itemDestroyed
initialised
activeContentItemChanged

包含的对象 (Contained objects)

Straight forwards from golden-layout, refer to their doc

从黄金布局直截了当，请参阅其文档

show
shown
maximised
minimised
resize
hide
close
open
destroy

方法 (Methods)

容器 (Container)

These are defined on the container objects

这些是在容器对象上定义的

addGlChild(child, comp)

'child' is a configuration object (cfr golden-layout doc.), 'comp' is a vue component of a contained object The child.componentState.templateId will be managed : don't fuss with the IDs, just give the component (your specified ID won't be replaced)

'child'是一个配置对象(cfr golden-layout文档。)，'comp'是所包含对象的vue组件。child.componentState.templateId将被管理：不要大惊小怪地使用ID，只需给组件(您指定的ID将不会被替换)

removeGlChild(index)

This function is called automatically on VueComponent.beforeDestroy

在VueComponent.beforeDestroy上自动调用此函数。

包含的对象 (Contained objects)

hide()
show()
close()

黄金路由器 (golden-router)

The router is a layout-golden that aims to sublimate the It takes perhaps more options than the later (even if it is not sure) and let people manage their routes in tabs, then having two opened in a split screen or even popped-out in another browser window on another physical display.

路由器是layout-golden ，旨在升华它可能比后面的版本有更多选择(即使不确定)，并允许人们在选项卡中管理其路由，然后将其中的两个分开打开屏幕，甚至在另一个物理显示器上的另一个浏览器窗口中弹出。

The main usage is . Any options of router-view still have to be implemented.

主要用法是 。 router-view任何选项仍然必须实现。

职称 (Titles)

One propriety the golden-router has more than router-view is due to the fact that tabs must have a title. The property titler allows you to specify a function that takes a route object in parameter and gives the string that will be used as title.

golden-router具有比router-view更多的特性，是因为选项卡必须具有标题。 属性titler使您可以指定一个函数，该函数在参数中接受一个路由对象，并提供将用作标题的字符串。

If none is specified, the default is to take $route.meta.title - this means that routes have to be defined with a title in their meta-data.

如果未指定，则默认值为$route.meta.title这意味着必须在其元数据中使用标题定义路由。

去测试 (To test)

Run npm run all - there are two things to bundle: the library and the test program. After that, run npm run serve, this will launch the minimalistic server as SPA don't fit with file serving.

运行npm run all -捆绑了两件事：库和测试程序。 之后，运行npm run serve ，这将启动简约服务器，因为SPA不适合文件服务。

待办事项 (TODOs)

重新排序和互动 (Re-ordering and interactions)

For now, either Vue interact with the layout, either we let the user re-organise

现在，要么Vue与布局互动，要么我们让用户重新组织

• goldenKey property to elements (re-use the v-for :key ?)

  元素的goldenKey属性(重新使用v-for：key吗？)

• replicate the reorganisation in the ghost structure (list of empty

  surrounded by display:none; replicating the layout tree)

  复制重影结构中的重组(由display：none包围的空

  列表；复制布局树)

• Use container.setState( state ) or container.extendState( state ) to allow dynamic set of state

  使用container.setState(state)或container.extendState(state)允许动态设置状态

翻译自: https://vuejsexamples.com/golden-layout-integration-in-vue/

vue手机端布局纵向布局