Harmony组件容器组件-dialog

最新推荐文章于 2024-11-19 14:28:20 发布

赛罗003

最新推荐文章于 2024-11-19 14:28:20 发布

阅读量600

点赞数 1

文章标签： harmonyos

本文链接：https://blog.csdn.net/m0_60786034/article/details/124772390

版权

这篇博客详细介绍了如何创建并使用一个自定义的对话框组件，支持在手机、平板、智慧屏和智能穿戴设备上运行。组件具有拖拽功能，并提供了show和close等方法以控制弹窗的显示与关闭。同时，它还支持如dragable、width和height等特定属性，并可响应cancel、show和close等事件。

摘要由CSDN通过智能技术生成

dialog

v.对话；用对话表达

n.问答；(小说中的)对白；对话体，网络对话框；对话方块；对话盒

即控制弹窗，悬浮窗的组件。

自定义弹窗容器。

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	支持	支持

属性

除支持通用属性外，支持如下属性：

名称	类型	默认值	必填	描述
dragable7+	boolean	false	否	设置对话框是否支持拖拽。

说明

弹窗类组件不支持focusable、click-effect属性。

样式

仅支持通用样式中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

事件

不支持通用事件，仅支持如下事件：

名称	参数	描述
cancel	-	用户点击非dialog区域触发取消弹窗时触发的事件。
show7+	-	对话框弹出时触发该事件。
close7+	-	对话框关闭时触发该事件。

方法

不支持通用方法，仅支持如下方法。

名称	参数	描述
show	-	弹出对话框。
close	-	关闭对话框。

说明

dialog属性、样式均不支持动态更新。

示例

实现一个可以自由拖拽的弹窗

<div class="doc-page">
    <text class="title">弹窗</text>

    <div class="btn-div">
        <input type="button" class="input-click" value="拖拽弹窗" onclick="showDialog"></input>
    </div>
    <dialog id="dragDialog" dragable="true">
        <div class="dialog-div">
            <div class="inner-txt">
                <text class="txt">请拖拽</text>
            </div>
            <div class="inner-btn">
                <button type="text" value="确定" onclick="setSchedule" class="btn-txt"></button>
            </div>
        </div>
    </dialog>