#夏日挑战赛# HarmonyOS - 自定义组件之消息弹窗 原创 精华

作者：潘宏熙

本文正在参加星光计划3.0–夏日挑战赛

前言

刚接触鸿蒙开发不久，在最近接触的一个项目中，发现有很多类似的消息提示弹窗。对项目所有弹窗进行分析，开发一个公共的消息弹窗组件

效果演示

组件说明

组件属性定义

组件属性

组件options属性

组件options属性中的button属性

组件实现代码

htm代码：

<!-- index.hml -->
<dialog ref="messageBoxDialog">
    <div class="box">
        <div class="header {{!title?'no-title':''}}">
            <text class="header-text color-text">{{title}}</text>
        </div>
        <div class="content {{isTextCenter?'content-center':''}}">
            <text for="item in content" class="content-text color-text">{{item}}</text>
        </div>
        <div class="btn-bar {{!firstBtn.show?'no-btn':''}}">
            <button if="{{firstBtn.show}}" class="btn" type="text" @click="firstBtnClick">{{firstBtn.text}}</button>
            <divider if="{{secondBtn.show}}" vertical="true" class="btn-divider"></divider>
            <button if="{{secondBtn.show}}" class="btn" type="text" @click="secondBtnClick">{{secondBtn.text}}</button>
        </div>
    </div>
</dialog>

样式代码：

/* index.css */
.box{
    flex-direction: column;
    width: 100%;
}
.header {
    height: 56px;
    align-items: center;
    padding: 0px 24px;
    width: 100%;
}
.header-text {
    font-size: 20px;
}
.content {
    width: 100%;
    flex-direction: column;
    padding: 0px 24px;
}
.content-center {
    align-items: center;
}
.content-text {
    font-size: 16px;
    line-height: 20px;
}
.btn-bar{
    height: 56px;
    margin-top: 8px;
    padding: 0px 16px;
    justify-content: center;
}
.btn{
    height: 40px;
    background-color: #fff;
    width: 100%;
    border-radius: 0px;
}
.btn-divider {
    height: 40px;
    padding: 8px 0px;
    flex: 0 0 40px;
}
.no-title {
    height: 24px;
}
.no-btn {
    margin-top: 0px;
    height: 24px;
}
.color-text{
    color: rgba(0,0,0,0.9);
}

js代码：

// index.js
export default {
    props: {
        // 属性visible控制弹窗是否显示
        visible:{
            default(){
                return {
                    show:false
                }
            }
        },
        // 属性options弹窗显示内容控制
        options: {
            default(){
                return {
                    content:''
                }
            }
        }
    },
    data : {
        // 组件内部记录当前打开或关闭状态
        isShow:false
    },
    // 对传入的各种属性进行逻辑处理
    computed:{
        title(){
            return this.options.title || ''
        },
        content(){
            const content = this.options.content
            if(Array.isArray(content)){
                return content
            }
            if(typeof content === 'string'){
                return [content]
            }
            return []
        },
        // 处理文本居中显示逻辑
        isTextCenter(){
            const content = this.options.content
            if(Array.isArray(content)){
                return false
            }
            if(typeof content === 'string'){
                return  true
            }
            return false
        },
        firstBtn(){
            const buttons = this.options.buttons || [];
            const button = buttons[0];
            const butOpt = { show:true }
            if(button){
                if(typeof button === 'string'){
                    butOpt.text = button
                } else if(typeof button === 'object') {
                    butOpt.text = button.text
                    butOpt.handle = button.handle
                }else {
                    butOpt.show = false
                }
            }else{
                butOpt.show = false
            }
            return butOpt
        },
        secondBtn(){
            const buttons = this.options.buttons || [];
            const button = buttons[1];
            const butOpt = { show:true }
            console.log('secondBtn: ' + JSON.stringify(button))
            if(button){
                if(typeof button === 'string'){
                    butOpt.text = button
                } else if(typeof button === 'object') {
                    butOpt.text = button.text
                    butOpt.handle = button.handle
                }else {
                    butOpt.show = false
                }
            }else{
                butOpt.show = false
            }
            return butOpt
        }
    },
    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(typeof this.firstBtn.handle === 'function'){
            this.firstBtn.handle()
        }
    },
    secondBtnClick(){
        if(this.isShow){
            this.$refs.messageBoxDialog.close();
            this.isShow = false;
        }
        if(typeof this.secondBtn.handle === 'function'){
            this.secondBtn.handle()
        }
    }
};

组件使用

在其他组件或页面hml引入组件

<element name="message-box" src="../../component/message-box/index.hml"></element>
<div class="container">
    ...
    <message-box id="message-box-dialog" visible="{{visible}}" options="{{message}}"></message-box>
</div>

在其他组件或页面js中如下使用

    // 在data中定义组件属性，具体属性格式可以参考组件属性定义
    data: {
        ...
        visible: {
            show:false
        },
        message:{
            content:''
        }
    },
    ...
    // 重新连接方法
    connect(){
        console.log('connect is called')
    }
    // 调用此方法可以在页面打开弹窗
    openDialog(){
        this.message = {
            title:'连接失败',
            content:[
                "1.请确认设备电量充足，并处开机状态请确认设备电量充足，并处开机状态",
                "2.将设备靠近要连接的手机（10米以内）"
            ],
            buttons:['稍后再试',{text:'重新连接',handle:this.connect}]
        };
        this.visible = { show:true };
    },
    // 其他参数调用，只有一个按钮
    openDialog2(){
        this.message = {
            title:'配网失败',
            content:[
                "1.检查设备是否接通电源",
                "2.请按开关键至ON",
                "3.再次碰一碰",
                "4.听到“嘀”一声提示音表示设置成功"
            ],
            buttons:['我知道了']
        }
        this.visible = {show:true};
    },
    // 无标题
    openDialog3(){
        this.message = {content:'检查设备是否接通电源检',buttons:['我知道了']}
        this.visible = {show:true};
    },
    // 无按钮，3秒后自动关闭
    openDialog4(){
        this.message = {title:'温馨提示',content:'检查设备是否接通电源检'}
        this.visible = {show:true};
        setTimeout(()=>{
            this.visible = {show:false};
        },3000)
    },

总结

以上就是消息弹窗组件开发以及使用的全部内容。此组件可以更加灵活的控制打开或关闭。也可以动态的显示弹窗内容。

更多原创内容请关注：中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。