想要实现这个效果可使用下列方法:首先需要添加一个项目参数,并为下拉菜单组件添加一个交互:用来修改项目参数的值。再将这个项目参数作为数据条件去判断,从而控制图片组件的鼠标穿透,下面是具体的示例步骤:
在项目中添加一个下拉菜单组件和图片组件。
点击左上方的“项目-项目设置”,添加一个新的项目参数并设置参数的默认值,如下图所示:
点击选中下拉菜单组件,添加一个新的交互,用来修改项目参数,开启动态值并设置为“当前组件值”,此时当我们在下拉菜单组件中选择“选项卡一”时,项目参数a的值就会变为“选项卡一”,当我们选择“选项卡二”时,项目参数a的值就会变为“选项卡二”。
然后点击“数据-数据条件”,创建第一个数据条件,条件是:项目参数a的值等于选项卡一,如下图所示:
接着创建第二个数据条件,条件是:项目参数a的值等于选项卡二,创建成功后点击下方的“确认”按钮进行保存。
设置完成后,我们需要使用数据条件来修改图片组件的样式:将鼠标悬停在“鼠标穿透”设置项上,就可以看到扩展设置的菜单按钮,点击之后就会打开扩展设置菜单,点击生成“条件样式”。
设置条件样式的前提是已经设置好了数据条件,这里我们选择之前设置的两个条件,并分别控制“鼠标穿透”的开启和关闭:
这样我们就完成了所有的设置,当在下拉菜单中选择“选项卡一”时,开启图片组件的鼠标穿透,我们无法选中图片,选择“选项卡二”时,不开启鼠标穿透,可以选中图片,效果如下图所示:
更多数字孪生可视化干货内容等你发现
了解更多内容