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

admin 管理员组

文章数量: 887021

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)

<layout-golden>
	<gl-col>
		<gl-component title="compA">
			<h1>CompA</h1>
		</gl-component>
		<gl-row>
			...
		</gl-row>
		<gl-stack>
			...
		</gl-stack>
	</gl-col>
</layout-golden>

不要忘了让它起作用 (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 <golden-layout> element (the square brackets stand for "optional")

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

<template slot="template-name"[ slot-scope="myState"]>
	...
</template>

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

<gl-component v-for="sth in swhr" :key="sth.else"
	template="template-name" :state="sth.state" />

物产 (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 childponentState.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组件。childponentState.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 <router-view /> 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 ，旨在升华<router-view />它可能比后面的版本有更多选择(即使不确定)，并允许人们在选项卡中管理其路由，然后将其中的两个分开打开屏幕，甚至在另一个物理显示器上的另一个浏览器窗口中弹出。

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

主要用法是<golden-router /> 。 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 <div> surrounded by display:none; replicating the layout tree)

  复制重影结构中的重组(由display：none包围的空<div>列表；复制布局树)

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

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

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

vue手机端布局纵向布局

本文标签： 布局 纵向 黄金 手机 Vue