条件式容器和文字输入

效果

条件式容器配置

  • step1. 密码输入有显示和隐藏的两种方式,我们可以修改「文字输入」组件的样式来达到这个效果。
  • step2. 配置不同的图标,进行提示。

子容器视图切换

由于隐藏密码和展示密码两个子容器视图可能会被来回切换,这时候用条件判断来进行子容器视图的切换就不合适了。我们可以通过一个「切换条件视图」的行为来实现来个视图来回切换的效果。

  • 「隐藏密码」密码子容器添加的行为是「切换视图条件—>展示密码」
  • 「展示密码」密码子容器添加的行为是「切换视图条件—>隐藏密码」

显示输入框内容

配置该行为后,会发现之前在「隐藏密码_文字输入」组件中输入的内容,随着切换视图条件后换了一个输入框自然也就不能明文展示我们输入的内容。
如果我们想要让「隐藏密码_文字输入」组件中输入的内容在另一个输入框中明文展示我们需要借助页面数据然后设置对应输入框的值。具体操作步骤如下:

  • step1. 设置页面数据,用于接收输入框输入的内容
  • step2. 为输入框在输入焦点时配置「设置页面数据」的行为,值为当前输入框的内容
  • step3. 为切换样式的图标添加「设置输入框值」的行为,对象为切换后的输入框,值为刚设置的页面数据。

操作步骤示范

文章知识点

行为

设置页面数据
设置输入框值

需要更多帮助

未能解决您的问题?跳转社区进行话题讨论

2022-08-23
2 0