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

HarmonyOS-自定义组件消息弹窗

时间:2023-03-13 16:06:56 科技观察

了解更多开源请访问:51CTO开源基础软件社区https://ost.51cto.com前言接触鸿蒙开发不久,在最近接触的一个项目中,发现有很多类似的消息提示弹窗。分析项目所有弹窗,开发一个公共消息弹窗组件。效果演示组件描述组件属性定义组件属性:名称类型默认值必填描述visibleobject{show:false}否控制弹窗的显示状态,因为当前组件属性没有双向绑定功能。所以使用对象格式来保证每次改变可见值时,组件都能监听options对象,无弹窗显示属性,包括title,content,button等。具体格式参考对以下选项属性进行说明。组件选项属性:name类型默认值必填descriptiontitlestringno无弹窗标题contentstring|stringno是弹窗文本内容,当内容为字符串类型时,将显示为单行文本,如果是一个字符串数组,显示为多行文字,单行文字自动居中显示buttons(string|button)无弹窗标题,底部按钮,具体属性可以显示最多2个按钮,如果超过2个按钮,后面的部分会被自动丢弃。具体格式参考后面的按钮属性说明。组件options属性中的button属性:nametype,defaultvalue,description,textstring,noyes,按钮显示文字,当button为string时,为属性handlefunction,nono,按钮点击触发事件,会在popup中显示窗口关闭后调用该事件组件实现代码htm代码:{{title}}

{{item}}
{{firstBtn.text}}{{secondbtn.text}}
样式代码:/*index.css*/.box{flex-direction:column;width:100%;}.header{height:56px;align-items:center;padding:0px24px;width:100%;}.header-text{font-size:20px;}.content{width:100%;flex-direction:column;padding:0px24px;}.content-center{align-items:center;}.content-text{font-size:16px;line-height:20px;}.btn-bar{height:56px;margin-top:8px;padding:0px16px;justify-content:center;}.btn{height:40px;background-color:#fff;width:100%;border-radius:0px;}.btn-divider{height:40px;padding:8px0px;flex:0040px;}.no-title{height:24px;}.no-btn{margin-top:0px;height:24px;}.color-text{color:rgba(0,0,0,0.9);}js代码://index.jsexportdefault{props:{//属性visible控制弹窗是否显示visible:{default(){return{show:false}}},//属性options弹窗显示内容controloptions:{default(){return{content:''}}}},data:{//组件内部记录当前打开或关闭状态isShow:false},//对传入的各种属性进行逻辑处理computed:{title(){returnthis.options.title||''},content(){constcontent=this.options.contentif(Array.isArray(content)){返回内容}if(typeofcontent==='string'){return[content]}return[]},//处理文本中心显示逻辑isTextCenter(){constcontent=this.options.内容if(Array.isArray(content)){returnfalse}if(typeofcontent==='string'){returntrue}returnfalse},firstBtn(){常量按钮=this.options.buttons||[];常量按钮=按钮[0];constbutOpt={show:true}if(button){if(typeofbutton==='string'){butOpt.text=button}elseif(typeofbutton==='object'){butOpt.text=button.textbutOpt.handle=button.handle}else{butOpt.show=false}}else{butOpt.show=false}returnbutOpt},secondBtn(){constbuttons=this.options.buttons||[];常量按钮=按钮[1];constbutOpt={show:true}console.log('secondBtn:'+JSON.stringify(button))if(button){if(typeofbutton==='string'){butOpt.text=button}elseif(吨ypeofbutton==='object'){butOpt.text=button.textbutOpt.handle=button.handle}else{butOpt.show=false}}else{butOpt.show=false}returnbutOpt}},onInit(){//监听visible属性,控制弹窗打开或关闭this.$watch('visible','onVisibleChange');},onVisibleChange(val){if(val.show){if(!this.isShow){this.$refs.messageBoxDialog.show();this.isShow=true;}}else{if(this.isShow){this.$refs.messageBoxDialog.close();this.isShow=false;}}},firstBtnClick(){if(this.isShow){this.$refs.messageBoxDialog.close();this.isShow=false;}if(typeofthis.firstBtn.handle==='function'){this.firstBtn.handle()}},secondBtnClick(){if(this.isShow){this.$refs.messageBoxDialog.close();this.isShow=false;}if(typeofthis.secondBtn.handle==='function'){this.secondBtn.handle()}}};组件用于在其他组件或页面hml中引入组件:...是在其他组件或页面js中使用如下//data中定义组件属性,具体属性格式可参考组件属性定义data:{...visible:{show:false},message:{content:''}},...//重连方法connect(){console.log('connectiscalled')}//调用该方法在页面打开弹窗openDialog(){this.message={title:'连接失败',content:["1.PleaseconfirmthedevicePleaseconfirmthatthedevicehasenoughpowerandopened","2.将设备靠近要连接的手机(10米以内)"],buttons:['稍后重试',{text:'Reconnect',handle:this.connect}]};this.visible={show:true};},//调用其他参数,只有一个按钮openDialog2(){this.message={title:'配网失败',content:["1.检查设备是否接通电源","2.请按下电源键开机","3.再次触摸","4.听到滴滴声表示设置成功"],buttons:['我知道了']}this.visible={show:true};},//untitledopenDialog3(){this.message={content:'检查设备是否开机',buttons:['我明白了']}this.visible={show:true};},//无按钮,3秒后自动关闭openDialog4()openDialog4(){this.message={title:'温馨提示',content:'检查设备是否开机'}this.visible={show:真的};setTimeout(()=>{this.visible={show:false};},3000)},上面是消息弹窗组件开发及使用的所有内容这个组件可以更灵活的控制开启或离开。您还可以动态显示弹出窗口的内容。了解更多开源信息,请访问:51CTO开源基础软件社区https://ost.51cto.com。