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)
<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 slot
s 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-for
s) 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回答此类,以适合布局子容器,您可以覆盖它
.glComponentwidth 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 <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.com/golden-layout-integration-in-vue/
vue手机端布局纵向布局
vue手机端布局纵向布局_Vue中的黄金布局集成相关推荐
- vue 手机端路由切换滑动_vue移动端router-view嵌套实现底部导航切换
路由使用 vue-router 组件库使用 vue-ydui 效果图: 登录.png 主界面-首页.png 主界面-办事大厅.png 项目结构 图片.png 大体流程 图片.png 路由代码 impo ...
- vue手机端开发聚焦不灵敏
vue手机端开发聚焦不灵敏 前置: 手机端开发时有时使用UI框架中的输入框或者文本域在点击的时候聚焦不是很快速.因为一是有的控件带有动画过度效果,二是移动设备的屏幕点击事件大多会延迟300ms左右才会 ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- vue手机端回退_推荐3个快速开发平台 前后端都有 接私活又有着落了
经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台. 第一个就是优秀的Jeecg-boot快速开发平台 前端采用阿里的ant-design-vue ...
- vue手机端回退_华为官方教程:以 P40 为例,鸿蒙 OS 2.0 Beta 版本回退到 EMUI 11 稳定版...
12月16日,华为举行 HarmonyOS 2.0 手机开发者 Beta 活动.现场正式发布了 HarmonyOS 2.0 手机开发者 Beta 版本.同时,HarmonyOS 2.0 手机开发者 B ...
- html段落布局,如何使用WPS2012中的“段落布局”详细图文介绍
对于经常坐在电脑前整理文档的网友来说,最经常的操作之一可能就是对文档中文本段落格式进行整理,比如首行缩进.段前距.段后距.行距等.在WPS Office 2012的文字工具中,"段落布局&q ...
- java怎么设置卡片布局_在Java中使用卡片布局管理器的方法
在Java中使用卡片布局管理器的方法 发布时间:2020-12-03 16:05:18 来源:亿速云 阅读:85 作者:Leah 在Java中使用卡片布局管理器的方法?针对这个问题,这篇文章详细介绍了 ...
- vue 怎么全局到入常量_Vue 中如何定义全局的变量和常量(转)
17.6k 次阅读 · 读完需要 10 分钟 7 Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 gl ...
- vue手机端回退_vue移动端弹框组件,vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
最新文章
- 阿里CEO张勇放话,90%产品岗将由技术产生,不懂技术的产品人被out了吗?
- 【ABAP】通过ST05分析程序执行路径
- html5在线制作教程,HTML5 Canvas 制作动画
- 光复用技术中三种重要技术_【技术文章】X射线无损检测仪在锂电池行业中的重要应用...
- TypeError: Fetch argument has invalid type class ‘numpy.float32‘, must be a string or Tensor
- Python新闻网站项目-3.Gerapy爬虫分布式部署
- 分兵策略应对高速发展
- 传奇服务器修改万年雪霜,传说之万年雪霜(一)
- Android11/Android Q分屏功能实现
- 浅谈Deferred(延迟对象)
- 古诗名句分类二:事理哲理
- 《Better Performance at Lower Occupancy》解读
- 主叫用户、被叫用户、局内呼叫、局间呼叫、发话端局、受话端局 等定义
- 美好只在一瞬间[frwy]
- prometheus-简介
- 三国志战略版:Daniel_马腾分析
- 12月份参加工作的年假怎么休_请问我的年假可以在12月份休吗?单位说可以12月1日就不用上班了,我可以上到12月28日吗?...
- php中如何使用KindEditor编辑器
- php游戏对接,php游戏
- File “./tools/train.py“, line 124 log_file = osp.join(cfg.work_dir, f‘{timestamp}.log‘)
热门文章
- 告诉大家如何下钻石vga,480*640的竖版壁纸
- centos6.5百度网盘下载
- 安全对你来说意味着什么
- 愿做一个淡看花落的闲人
- [Debug] Pytorch 版本问题 THC/THC.h: No such file or directory
- STC15系列单片机-PWM模块
- 计算机网络【UDP和TCP首部字段详解】
- “Rimon天气”Android天气查询软件项目总结
- 日本机载激光雷达测深进展(二)机载激光雷达测深经验
- 微信保存图片提示失败_微信照片保存到手机总保存失败怎么处理