乐趣区

关于物联网:ThingsKit物联网平台可视化工具之大屏事件配置

概述

大屏事件配置是指用户与网页交互时触发的一种行为或动作,能够被 JavaScript 侦测并解决。包含在网页上的点击、拖动、键盘输入、鼠标挪动等操作;甚至还有一些高级事件,设置组件款式等。
在 JavaScript 中,事件能够通过事件处理程序(event handler)来解决。事件处理程序是一个函数,当事件产生时被调用。它能够被绑定到元素上,以便在事件产生时执行相应的操作。

性能阐明

在零碎中事件配置分三类:组件交互、根底事件、高级事件。

组件交互

组件交互是指一个管制组件传参给另外一个展现组件;即可实现一个交互动作。

案例一:工夫条件查问折线图展现

操作步骤如下:

  • 在页面中,新增一个“自定义工夫选择器”;简略设置一下款式,设置一个默认值。
  • 新增一个“折线图动画”,并为折线图设置好动态数据接口;【如何设置动态数据见上一篇数据配置】;
  • 接着为“工夫选择器”设置组件交互事件;首先选中“工夫选择器”,单击“事件”标签;
  • 在组件交互中,单击“新增”;配置关联组件;
  • 触发事件设为抉择实现;绑定设为折线图动画;
  • 最初,在关联指标组件申请参数中,设置参数值;startTs 设为开始工夫;endTs 设为完结工夫;
  • 设置实现;最初保留并预览后果。

案例二:按钮实现多页面切换

操作步骤如下:

  • 在页面中,新增两个“自定义按钮”;作为“第一页”和“第二页”。
  • 随便新增 3 个组件,作为第一页,所需展现的内容;而后别离为组件的名称,减少“-1”标识符作为辨别第一页和第二页;设置好之后,将 3 个组件进行合并,选中 3 个组件,右键“创立分组”;并取名为“分组 -1”;代表是“第一页”的内容;
  • 第一页的内容设置,并单击图层中的“暗藏”按钮;防止影响咱们设计“第二页”;
  • 采纳雷同的办法,设计“第二页”;持续新增 3 个组件,作为第二页内容;同样别离为组件的名称,减少“-2”标识符作为辨别第一页和第二页;设置好之后,将 3 个组件进行合并,选中 3 个组件,右键“创立分组”;取名为“分组 -2”;代表是“第二页”内容;
  • 第二页的内容设置,并单击图层中的“暗藏”按钮;
  • 两个页面的内容设置结束;接着就是为组件绑定交互事件;
  • 单击“第一页”按钮,

    • 右侧“定制”区域中,找到“指标”,选中“分组 -1”;
    • 右侧“事件”区域中,组件交互处,单击“新增”;触发事件抉择实现,绑定抉择任意一个后缀为“-1”的组件。
  • 单击“第二页”按钮,

    • 右侧“定制”区域中,找到“指标”,选中“分组 -2”;
    • 右侧“事件”区域中,组件交互处,单击“新增”;触发事件抉择实现,绑定抉择任意一个后缀为“-2”的组件。
  • 最初再检查一下,在图层治理中,默认显示“分组 -1”;暗藏“分组 -2”
  • 设置实现;最初保留并预览后果。

页面切换第一局部:

页面切换第二局部:

根底事件

常见的根底事件包含单击、双击、鼠标进入、鼠标移出;用户能够别离在这些事件上面别离做一些自定义设置等。

案例一:鼠标进入时扭转背景色彩

操作步骤如下:

  • 在页面中,新增一个“自定义按钮”组件;
  • 接着为“自定义按钮”设置根底事件;首先选中“自定义按钮”,单击“事件”标签;
  • 在“根底事件配置”中,单击“编辑”按钮;
  • 在鼠标进入“mouseenter”事件中退出【mouseEvent.target.style.backgroundColor = “#ff0000”;】
  • 在鼠标移出“mouseleave”事件中退出【mouseEvent.target.style.backgroundColor = “”;】
  • 设置实现;最初保留并预览后果。

高级事件

高级事件是能够依据用户的非凡状况,自定义设置组件的款式以及各种成果。

案例一:轮播列表中退出动画成果

操作步骤如下:

  • 在页面中,新增一个“轮播列表”组件;
  • 接着为“轮播列表”设置高级事件;首先选中“轮播列表”,单击“事件”标签;
  • 在“高级事件配置”中,单击“编辑”按钮;
  • 在弹出的高级事件编辑器中,右侧零碎提供了局部案例;单击“介绍案例”;
  • 找到“案例 8:增加【轮播列表】款式”,单击开展,获取代码;
  • 将代码复制到左侧,” 渲染之后(vnodeMounted)” 中;
  • 设置实现;最初保留并预览后果。

文章起源(首发地址):ThingsKit 物联网平台

退出移动版