Axure8.0实例|数量编辑器

Axure8.0实例|数量编辑器

一、元件准备

1、添加三个矩形框,分别取名为"减少数量"、"数量背景"、"增加数量"。"减少数量"矩形框中输入"-"号,"增加数量"矩形框中输入"+"号,待用;

2、添加一个文本框,取名为"数量",用来接收通过键盘输入的数字;且该文本框的长度和高度与"数量背景"矩形框保持一致。

二、添加用例

一般情况下,无论是加入进货单,还是下单购买,最少的数量是1,所以我们这里设置数量的默认值为1,在"数量背景"矩形框中输入数量"1"。

1、首先,给"减少数量"矩形框添加用例,点击"减少数量"矩形框,达到的效果是一次减少1,且要求在数量为1的时候,不能再减小,所以要判断"数量背景"矩形框的值是否大于1,只有"数据背景"矩形框的值大于1时,才能减小数值,具体用例如下图:

当"背景数量"矩形框的值大于1时,设置"数量背景"矩形框的文字等于它本身的值减去1,具体设置用例如下:

2、给"增加数量"矩形框设置用例,点击"增加数量"矩形框,达到的效果是一次增加1,具体用例如下图:

3、将"数量背景"矩形框放置到"数量"文本框上,在点击"数量背景"矩形框时,将"数量背景"矩形框的文字赋值给"数量"文本框,并且将"数量"文本框置于顶层,同时让"数量"文本框获取焦点,具体用例如下图:

4、给"数量"文本框设置用例。通过键盘输入数值给"数量"文本框后,在"数量"文本框驶入焦点时,把"数量"文本框置于底层,同时将"数量"文本框的数值赋值给"数量背景"矩形框,具体用例如下:

三、预览

至此,数量编辑器到此已经完成了,预览一下吧。

相关推荐
王的宝库4 分钟前
Go 项目结构:从单文件到标准工程布局
开发语言·后端·golang
Tairitsu_H8 分钟前
[C++] 深入理解红黑树:封装set与map
开发语言·c++·set·map·红黑树·模拟实现
泡海椒22 分钟前
JQuick-Curl 性能分析:并发场景下的性能表现与调优,第三方接口调用不只要快写也要稳跑
java·开发语言·okhttp
小智老师PMP37 分钟前
2026深度解析|PMP第八版与NPDP核心侧重点本质区别(管理类证书怎么选)
开发语言·分布式·算法·职场和发展·产品经理
江畔柳前堤2 小时前
前台·中台·后台:2026年AI原生时代的架构全景图
开发语言·人工智能·算法·机器学习·架构·scala·ai-native
Figo_Cheung2 小时前
Figo基于RNC理论的宇宙演化第七纪元猜想
开发语言·php
泡海椒3 小时前
JQuick-Curl 二次开发:自定义解析器、扩展点开发指南,如何把框架能力真正变成团队资产
java·开发语言·okhttp·maven
WWJA王文举4 小时前
FreeRTOS事件组和任务通知详解:为什么任务通知比队列更轻量?
开发语言·php
熊野君4 小时前
第 7 章 AI时代产品经理新增能力
大数据·人工智能·经验分享·职场和发展·产品经理
wuyk5555 小时前
12.归并排序:分治思想的稳定排序算法
开发语言·数据结构·算法·排序算法