4.3 单击切换密码可见性
案例描述
在文本框中输入密码，单击“切换”按钮，文本框的密码显示；再次单击“切换”按钮，则隐藏，如图4-21所示。
图4-21 切换密码可见性
思路分析
- ▷ 文本框上添加遮罩层，用来设置显示/隐藏文本框。
- ▷ 为鼠标添加“鼠标单击时”事件，设置文本值。
操作步骤
（1）按Ctrl+N快捷键，新建一个Axure的文档。
（2）在“元件库”面板中将“文本框”元件拖入编辑区中，在工具栏中设置“字体尺寸”为16，x和y均为80，“宽度”为245，“高度”为38，在右侧“检视：文本框”区域设置名称为password-txt，如图4-22所示。
图4-22 设置文本框
（3）在右侧“属性”面板中的“文本框”区域，单击“类型”下拉列表框右侧的下三角按钮，在弹出的下拉菜单中选择“密码”选项，如图4-23所示。
图4-23 设置文本框
（4）在“元件库”面板中将“矩形1”元件拖入编辑区中，在右侧“检视：矩形”区域设置名称为mask，位置和大小设置和“文本框”元件相同，单击“样式”标签切换至“样式”面板，选中“隐藏”复选框，隐藏“矩形”元件，如图4-24所示。
（5）在“元件库”面板中将“按钮”元件拖入编辑区中，双击输入“切换”，在工具栏中设置x为340，y为80，“宽度”为85，“高度”为38，在右侧“检视：矩形”区域设置名称为toggle，如图4-25所示。
图4-24 设置“矩形”元件
图4-25 设置“按钮”元件
（6）在右侧单击“属性”标签切换至“属性”面板，双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“切换可见性”选项，在右侧“配置动作”区域选中“mask（矩形）”复选框，在下方选中“置于顶层”复选框，如图4-26所示。
图4-26 切换动态面板可见性
（7）在左侧选择“设置文本”选项，在右侧选中“mask（矩形）”复选框，在下方“设置文本为”区域单击右侧的fx按钮，弹出“编辑文本”对话框，在下方“局部变量”选项组中单击“添加局部变量”超链接，设置LVAR1等于“元件文字”password-txt，在上方插入变量[[LVAR1]]，如图4-27所示。单击两次“确定”按钮返回至编辑区中。
（8）按Ctrl+S快捷键，以“4.3”为名称保存该文件，然后按F5键预览效果，如图4-28所示。
图4-27 插入变量
图4-28 最终效果