返回发烧友论坛
发 帖  

[文章]HarmonyOS原子化服务开发实战-dialog自定义弹窗

李洋水蛟龙
2021-11-24 15:23:56
阅读量0
0
4


主要实现为：自定义弹窗容器。
属性：除了支持通用属性外，还支持如下属性。
名称
类型
默认值
必填
描述
dragable7+
boolean
false
否
设置对话框是否支持拖拽。
说明：弹窗类组件不支持focusable、click-effect属性。
样式：仅支持通用样式中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
事件：不支持通用事件，仅支持如下事件：
名称
参数
描述
cancel
-
用户点击非dialog区域触发取消弹窗时触发的事件。
show7+
-
对话框弹出时触发该事件。
close7+
-
对话框关闭时触发该事件。
方法：不支持通用方法，仅支持如下方法。
名称
参数
描述
show
-
弹出对话框。
close
-
关闭对话框。

示例 效果展示：
图片1.png

图片2.png

图片3.png

示例代码：
index.hml
  1. <div class="doc-page">
  2.     <div class="btn-div">
  3.         <button type="capsule" value="请点击" class="btn" onclick="showDialog"></button>
  4.     </div>
  5.     <dialog id="simpledialog" dragable="true" class="dialog-main" oncancel="cancelDialog">
  6.         <div class="dialog-div">
  7.             <div class="inner-txt">
  8.                 <text class="txt">Simple dialog</text>
  9.             </div>
  10.             <div class="inner-btn">
  11.                 <button type="capsule" value="取消" onclick="cancelSchedule" class="btn-txt"></button>
  12.                 <button type="capsule" value="确定" onclick="setSchedule" class="btn-txt"></button>
  13.             </div>
  14.         </div>
  15.     </dialog>
  16. </div>
复制代码

index.css
  1. .doc-page {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5. }
  6. .btn-div {
  7.     width: 100%;
  8.     height: 200px;
  9.     flex-direction: column;
  10.     align-items: center;
  11.     justify-content: center;
  12. }
  13. .btn {
  14.     width: 200px;
  15.     height: 60px;
  16.     font-size: 24px;
  17.     background-color: #F2F2F2;
  18.     text-color: #0D81F2;
  19. }
  20. .txt {
  21.     color: #0D81F2;
  22.     font-weight: bold;
  23.     font-size: 39px;
  24. }
  25. .dialog-main {
  26.     width: 500px;
  27. }
  28. .dialog-div {
  29.     flex-direction: column;
  30.     align-items: center;
  31. }
  32. .inner-txt {
  33.     width: 400px;
  34.     height: 160px;
  35.     flex-direction: column;
  36.     align-items: center;
  37.     justify-content: space-around;
  38. }
  39. .inner-btn {
  40.     width: 400px;
  41.     height: 120px;
  42.     justify-content: space-around;
  43.     align-items: center;
  44. }
  45. .btn-txt {
  46.     background-color: #F2F2F2;
  47.     text-color: #0D81F2;
  48. }
复制代码

index.js
  1. import prompt from '@system.prompt';
  2. export default {
  3.     showDialog(e) {
  4.         this.$element('simpledialog').show()
  5.     },
  6.     cancelDialog(e) {
  7.         prompt.showToast({
  8.             message: 'Dialog cancelled'
  9.         })
  10.     },
  11.     cancelSchedule(e) {
  12.         this.$element('simpledialog').close()
  13.         prompt.showToast({
  14.             message: 'Successfully cancelled'
  15.         })
  16.     },
  17.     setSchedule(e) {
  18.         this.$element('simpledialog').close()
  19.         prompt.showToast({
  20.             message: 'Successfully confirmed'
  21.         })
  22.     },
  23.     doubleclick(e){
  24.         prompt.showToast({
  25.             message: 'doubleclick'
  26.         })
  27.     }
  28. }
复制代码

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友