当前位置: 首页 > 科技观察

OpenHarmonyJSUI小系统自定义控件——吐司提示

时间:2023-03-12 11:37:11 科技观察

更多内容请访问:鸿蒙科技社区,与华为官方共建https://ost.51cto.com1.目标是利用OpenHarmony小系统支持的基础控件,实现一个类似toast提示的组件,toast组件会在指定时间消失隐藏。2.背景在OpenHarmony标准系统上,有一个系统提示符@system.prompt。在标准系统中,提示可以设置相应的参数来实现提示的显示内容和持续时间。代码如下:importpromptfrom'@system.prompt'exportdefault{visibilitychange(e){prompt.showToast({message:'提示信息',duration:3000,});},}message:要显示的提示内容。duration:显示时长,到达设定时间后提示视图消失。目前,小型系统上没有@system.prompt功能。目前的需求是在L1设备上实现类似提示信息提示的功能。我们先称它为吐司吧。3、环境设备:君正x2000开发板。系统:OpenHarmony3.0.0.0(LTS)。四、效果1、视频效果效果视频请前往:吐司视频。2.效果截图5.实现思路从效果图中我们可以看出toast信息提示视图可以有以下特点:可以单行或者多行显示提示信息(目前支持两行,可以自行修改自己多行)。显示超出限制范围后用“...”截取。根据需求,提示视图可以在指定时间内自动消失。快速切换不同提示内容时,显示最后触发的提示信息。提示视图显示在界面底部附近。工具提示的文本在半透明的黑色背景上是白色的。分析:在小系统支持的基础容器中。提示信息显示在最上层,容器可以通过stack进行堆叠,将要显示的内容封装在一个div容器中,最后添加到stack容器中。使用定时器:setTimeout设置提示视图在到达指定时间后隐藏。提示内容通过文本实现;4、半透明圆角背景可以通过设置文字的背景颜色和样式border-radius的角度值来实现。建议在定时器执行完成后清除定时器:clearTimeout(this.timer)。6、完整代码说明:组件代码包括html、css、js三部分。因为代码比较简单,就不写注释了。

{{message}}
{{message}}
/*toastView.css*/.container{显示:弹性;证明内容:居中;对齐项目:居中;宽度:100%;高度:100%;}.main{显示:flex;证明内容:居中;对齐项目:居中;弹性方向:列;宽度:100%;高度:100%;}.main-img{宽度:100%;高度:100%;}.back-img{宽度:40px;高度:40px;边界半径:20px;左:20px;顶部:20px;}.btn{宽度:80%;高度:80px;背景色:#28496e;字体大小:22px;白颜色;边距:10px;}.toast{宽度:100%;高度:20%;顶部:75%;证明内容:居中;对齐项目:居中;}.toast2{宽度:100%;高度:20%;顶部:75%;证明内容:居中;对齐项目:居中;}.title{字体大小:18px;文本对齐:居中;宽度:80%;身高:70pX;背景色:#99000000;边界半径:50px;白颜色;填充:20px;文本溢出:省略号;}.title2{字体大小:18px;文本对齐:居中;宽度:80%;高度:110px;背景色:#99000000;边界半径:50px;白颜色;填充:20px;text-overflow:ellipsis;}//toastView.jsimport路由器来自'@system.router';varSHOW_LINE={ONE_LINE:1,MULTI_LINE:2}exportdefault{data:{title:'World',isOnlyLine:false,isMultiLine:false,message:'',timer:null},onToast3(){this.reset();这。showToast(SHOW_LINE.ONE_LINE,"显示一行提示信息,3秒后消失",3000);},onMoreToast3(){this.reset();this.showToast(SHOW_LINE.ONE_LINE,"当您的业务需要显示单行提示信息时,如果多行信息,多余的内容会用点号代替,3秒后消失",3000);},onToast5(){this.reset();this.showToast(SHOW_LINE.ONE_LINE,"显示单行提示信息,5秒后消失",5000);},onMultiLine(){这个。重置();this.showToast(SHOW_LINE.MULTI_LINE,"当您的业务需要显示多行提示时,可以使用我来显示,目前只支持两行,3秒后消失",3000);},onMoreMultiLine(){this.reset();this.showToast(SHOW_LINE.MULTI_LINE,"当您的业务需要显示多行提示时,可以使用我来显示,目前只支持两行,如果提示信息超过两行的话,则多余的信息将被替换为点,点将在3秒后消失",3000);},showToast(line,msg,duration){varthat=this;if(line===SHOW_LINE.ONE_LINE){//当行显示时this.isOnlyLine=true;}else{//多行显示this.isMultiLine=true;}this.message=msg;//启动定时器this.timer=setTimeout(()=>{if(line===SHOW_LINE.ONE_LINE){//显示that.isOnlyLine=false;}else{//显示that.isMultiLine=false;}clearTimeout(that.timer);},持续时间);},reset(){this.isOnlyLine=false;this.isMultiLine=错误的;如果(this.timer){clearTimeout(this.timer);}},onBack(){router.replace({uri:'pages/index/index'});}}更多内容请访问:与华为官方共建的鸿蒙技术社区https://ost.51cto.com