怎么用下拉框的选项来控制图片组件是否开启鼠标穿透
2025-01-02 19:33
为什么被折叠? 0 个回复被折叠

回答(1)

独角鲸 前台管理员
2025-05-09 15:14

想要实现这个效果可使用下列方法:首先需要添加一个项目参数,并为下拉菜单组件添加一个交互:用来修改项目参数的值。再将这个项目参数作为数据条件去判断,从而控制图片组件的鼠标穿透,下面是具体的示例步骤:


在项目中添加一个下拉菜单组件和图片组件。


点击左上方的“项目-项目设置”,添加一个新的项目参数并设置参数的默认值,如下图所示:


点击选中下拉菜单组件,添加一个新的交互,用来修改项目参数,开启动态值并设置为“当前组件值”,此时当我们在下拉菜单组件中选择“选项卡一”时,项目参数a的值就会变为“选项卡一”,当我们选择“选项卡二”时,项目参数a的值就会变为“选项卡二”


然后点击“数据-数据条件,创建第一个数据条件,条件是:项目参数a的值等于选项卡一,如下图所示:


接着创建第二个数据条件,条件是:项目参数a的值等于选项卡二,创建成功后点击下方的“确认”按钮进行保存。


设置完成后,我们需要使用数据条件来修改图片组件的样式:将鼠标悬停在“鼠标穿透”设置项上,就可以看到扩展设置的菜单按钮,点击之后就会打开扩展设置菜单,点击生成条件样式


设置条件样式的前提是已经设置好了数据条件,这里我们选择之前设置的两个条件,并分别控制“鼠标穿透”的开启和关闭:


这样我们就完成了所有的设置,当在下拉菜单中选择“选项卡一”时,开启图片组件的鼠标穿透,我们无法选中图片,选择“选项卡二”时,不开启鼠标穿透,可以选中图片,效果如下图所示:

咨询热线0571-88650917
地址 公司 邮箱

杭州市文一西路海创科技中心 311121

杭州多算科技有限公司

support@shanhaibi.com

关注山海鯨官方qq群,了解更多内容

QQ群号:788095444

Copyright © 2020-2025 多算科技, All Rights Reserved. 浙ICP备20006837号-5