鸿蒙os对话框

在鸿蒙应用中显示一个对话框简单的代码实现如下：
xxx.hml

<dialog id="dialog1" class="dialogClass">
    <div class="content">
        <div class="dialogDiv">
            <text>这个是文本1</text>
            <text>这是文本2</text>
            <button value="这是对话框" onclick="confirmClick"></button>
        </div>
    </div>
</dialog>

xxx.js

export default {
    showDialog: function () {
    var dialog = this.$element("dialog1");
                dialog.show();
    }
}

hml中预先渲染一个dialog，我们在需要显示的时候在通过$element("dialog1")获取到该对象，然后再dialog.show()将其显示出来。该对话框在实际运用中实际上存在很大不足，列如：
1.复用 多个hml中均想显示一个对话框，又不想重复造轮子
2.通过参数修改对话框内容 应用场景不一致，显示的内容也需要不一致。
3.对话宽关闭时进行回调 列如对话框显示一个按钮，点击后进行事件回调

首先实现第一个需求：复用
src/main/js/default/common/mdialog/mdialog.hml

<dialog class="dialogClass">
    <div class="content">
        <div class="dialogDiv">
            <text>这个是文本1</text>
            <text>这是文本2</text>
            <button value="这是对话框" onclick="confirmClick"></button>
        </div>
    </div>
</dialog>

我们在为对话框添加一个点击按钮关闭自己的功能
src/main/js/default/common/mdialog/mdialog.js

export default {
    confirmClick: function (e) {
        this.$element(this.id).close();
    }
}

于是我们就可以在各种hml文件中进行复用了，
src/main/js/default/pages/aa/aa.hml

<!--文件顶部添加-->
<element name="adialog" src="../../common/mdialog/mdialog">
</element>

.....

<!--使用-->
<adialog id="dialog1"></adialog>
<!--注意 adialog为element中的name值，可以根据自己的喜好进行自定义-->

src/main/js/default/pages/aa/aa.js

export default {
    showDialog: function () {
    var dialog = this.$element("dialog1");
                dialog.show();
    }
}

这样我们就得到了一个可以复用的对话框了。

实现第二个需求：通过参数改变对话框显示值
我们这次从调用者开始入手，列如我想传递title和msg两个属性给dialog，使得dialog可以根据这两个参数进行相关信息显示。
src/main/js/default/pages/aa/aa.hml

<!--文件顶部添加-->
<element name="adialog" src="../../common/mdialog/mdialog">
</element>
.....
<!--注意 adialog为element中的name值，可以根据自己的喜好进行自定义-->
<adialog id="dialog1" title="登录" msg="登录成功！"></adialog>

我们在进行dialog代码的编写
src/main/js/default/common/mdialog/mdialog.hml

<dialog class="dialogClass">
    <div class="content">
        <div class="dialogDiv">
            <text>{{ title }}</text>
            <text>{{ msg }}</text>
            <button value="这是对话框" onclick="confirmClick"></button>
        </div>
    </div>
</dialog>

如果我们需要接收参数并在js中进行处理的话也可以这样做
src/main/js/default/common/mdialog/mdialog.js

export default {
props: [
            'title', 'msg',//我们也能在js获取这两个值
    ],
    data: {
    },
    onInit() {
    //打印这两个参数
        console.info("onInit " + this.title + "  " + this.msg)
    },
    confirmClick: function (e) {
        this.$element(this.id).close();
    }
}

这样我们就得到了一个可以复用的又能设定显示指定内容的对话框了

我们还有这样的一个场景，一个js文件中显示一个对话框，我们点击上面的按钮后我们需要得知点击了哪一个。
为方便讲解我们依旧还是从调用者开始说起
src/main/js/default/pages/aa/aa.hml

<!--文件顶部添加-->
<element name="adialog" src="../../common/mdialog/mdialog">
</element>
.....
<!--注意 函数参数需要以@开头-->
<adialog id="dialog1" title="登录" msg="登录成功！" @confirm-event="dialogSuccess"></adialog>

src/main/js/default/pages/aa/aa.js

export default {
    showDialog: function () {
    var dialog = this.$element("dialog1");
                dialog.show();
    }，
    dialogSuccess: function (e) {
        console.info("---dialogSuccess---");
        prompt.showToast({
            message: e.detail.text//接收对话框点击后返回的text参数
        })
    },
}

aa.js中如果显示对话框后，如果点击对话框中的按钮会回调dialogSuccess函数，该函数触发后会在界面中显示一个Toast。

我们再来看dialog的实现
src/main/js/default/common/mdialog/mdialog.hml

<dialog class="dialogClass">
    <div class="content">
        <div class="dialogDiv">
            <text>{{ title }}</text>
            <text>{{ msg }}</text>
            <button value="这是对话框" onclick="confirmClick"></button>
        </div>
    </div>
</dialog>

src/main/js/default/common/mdialog/mdialog.js

export default {
props: [
            'title', 'msg',
    ],
    data: {
    },
    onInit() {
        console.info("onInit " + this.title + "  " + this.msg)
    },
    confirmClick: function (e) {
        this.$element(this.id).close();
        this.$emit('confirmEvent', {text: '点击了confirm按钮'});
    }
}

我们只需要再mdialog.hml的按钮点击事件中添加this.$emit(‘confirmEvent’, {text: ‘xxx’});即可进行了函数回调。
这样我们就的得到了一个又能复用，又能定义显示内容，又能接收窗口回调的对话框了。