PageNow PageNow
首页
  • 产品简介
  • 快速入门
  • 进阶使用
API
视频教程
联系我们
购买
首页
  • 产品简介
  • 快速入门
  • 进阶使用
API
视频教程
联系我们
购买
  • PageNow产品介绍

    • 产品简介
    • 企业版线上访问
    • 文档阅读说明
  • 快速入门

    • 基本概念
    • 管理工作台使用
    • 快速创建可视化页面
    • 设计器的基本使用
    • 布局块操作与配置
      • 布局块ID
      • 自定义Class
      • 布局块名称
      • 允许拖拽(锁定、解锁)
      • 快捷定位
      • 快捷尺寸
      • 层级
      • 是否显示(显示、隐藏)
      • 鼠标事件穿透
      • 多选排列布局
      • 单独显示图层
      • 拆分布局块
      • 组合
        • 如何编辑组内的组件
        • 将组件加入现有组合
        • 如何将组合内的组件移出组合
      • 收藏组件
      • 组件的复制与跨页复制
        • 当前页内复制
        • 跨页复制
    • 数据接入
  • 进阶使用

    • 组件生命周期
    • 组件交互
    • 双大括号语法
    • 内置交互启动器
    • 共享数据源
    • 代码编辑器使用技巧
    • 自定义Echarts图表
    • 数据字段映射
    • 数据源结果集裁剪
    • 在线自定义组件
  • 文档手册
  • 快速入门
PageNow
2022-03-24

布局块操作与配置

关于布局块的定义可查看快速入门-基本概念-布局块

# 布局块ID

布局块作为功能组件的外层容器,我们为其DOM根节点定义了唯一ID,使用此ID,可以通过JS或JQuery对其进行一些DOM操作,例如显示隐藏等等。

# 自定义Class

与布局块ID同理,我们可以为布局块的DOM根节点定义Class名,方便我们对器进行DOM操作。

# 布局块名称

可以通过给布局块设置名称来方便管理页面中的大量组件,设置的布局块名称也会在层级结构树中对应组件中显示。

# 允许拖拽(锁定、解锁)

当我们不需要对某个组件进行拖拽操作,可以将其布局块中【允许拖拽】的配置关闭(也叫锁定),锁定后的布局块将无法使用鼠标进行拖拽或尺寸调整,但仍可以通过键盘方向键进行位置移动。

我们也可以在组件右键菜单上点击【锁定】或【解锁】来达到同样的效果。

# 快捷定位

快捷定位可以对某个布局块进行基于当前画布的定位设置,目前快捷定位支持:水平居中、垂直居中、水平垂直居中。

# 快捷尺寸

快捷尺寸可以对某个布局块进行尺寸的快速设置,目前快捷尺寸支持:宽度铺满、高度铺满、全屏铺满。

# 层级

PageNow中,组件的层级由外层容器(布局块)的zIndex决定,拖入画布的组件,其布局块的层级默认设置为2,当两个组件的层级为2,我们想要将其中一个组件设置在另一个组件之上,可以将其层级设置为3.

当我们需要让某个组件始终显示在最顶层,可以在组件的右键菜单中,点击【置顶】,置顶操作会遍历当前画布中所有布局块中最大的层级值,然后在其之上加一作为当前被置顶布局块的层级。

# 是否显示(显示、隐藏)

当组件不需要在画布中显示时,可以将【是否显示】关闭,或者在组件右键菜单中选择【隐藏】。

被隐藏的组件,可以在层级结构树中将其回归显示

也可以点击以下按钮来将隐藏状态恢复到显示状态

# 鼠标事件穿透

当我们需要将某个组件置于其他组件上层显示,却又希望鼠标操作(例如点击)操作的是下层组件时,就可以在上层组件的布局块中打开【鼠标事件穿透】。

例如:我们可能需要在整个页面最上层放一个半透明的图片,而又不想这个图片遮挡住我们鼠标对下层组件的操作,那么就可以给这个图片组件的布局块开启鼠标事件穿透。

# 多选排列布局

多选多个组件后会调出【布局块排列布局】配置区域,具体如何多选组件可以查看设计器中的快捷键

其中我们可以对所选的组件进行快速排列,目前支持的排列有:左对齐、右对齐、顶部对齐、底部对齐、水平居中对齐、垂直居中对齐。

# 单独显示图层

当画布中显示的组件较多时,我们需要对一个或多个组件进行编辑配置,可以选中需要编辑配置的组件,然后右键菜单点击【单独显示图层】,此时会隐藏所有未被选中的组件

# 拆分布局块

当我们需要将画布中某个布局块拆分成多个时,可以在组件右键菜单上选择【拆分布局块】,具体可选择【横向拆分】或【纵向拆分】

# 组合

多选多个组件,在其中某个组件上调出右键菜单,选择【成组】,可以将被选中的组件进行组合,在组合上右键菜单选择【取消组合】可以将组合打散。

注:目前PageNow中不支持嵌套成组

# 如何编辑组内的组件

在组上双击,或者右键菜单中选择【打开编辑状态】,即可选中组内组件进行配置编辑

# 将组件加入现有组合

当画布中存在组合时,如果我们需要将某些未被成组的组件加入其中某个组合时,可以单选或多选未被成组的组件,右键菜单选择【加入组合】,然后选择需要加入的目标组合即可

# 如何将组合内的组件移出组合

打开组合的编辑状态,然后在需要移出的组件上右键菜单选择【移出组合】即可

# 收藏组件

在进行收藏组件操作前,我们要确保在【管理工作台】-【收藏组件管理】中添加分组,画布中选中某个组件,右键菜单选择【收藏】,填写相关信息并保存即可。

# 组件的复制与跨页复制

# 当前页内复制

在画布中选中一个或多个组件,右键菜单选择【复制】即可完成。

# 跨页复制

跨页复制只支持单个组件的复制,因此我们选中某个组件,右键菜单选择【跨页复制】,然后在需要粘贴组件的页面中,在画布上调出右键菜单,选择【粘贴剪切板内容】即可将组件粘贴至当前页面中。

设计器的基本使用
数据接入

← 设计器的基本使用 数据接入→

Theme by Vdoing | Copyright © 2021-2023 PageNow数据可视化 桂ICP备2021000260号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×