Dialog 弹出框

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-dialog": "wuss-weapp/w-dialog/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Dialog" desc="弹出框" />
  2. <w-pane desc="Pic" />
  3. <w-button bind:onClick="handleClick" data-id="1" type="info">{{ visible1 ? 'on' : 'off' }}</w-button>
  4. <w-dialog
  5. visible="{{ visible1 }}"
  6. bind:close="handleClose"
  7. >
  8. <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
  9. <image style="width: 100%;height: 300px;" class="" src="/pages/assets/logo.png" ></image>
  10. </view>
  11. </w-dialog>
  12. <w-pane desc="Button Close" />
  13. <w-button bind:onClick="handleClick" data-id="2" type="info">{{ visible2 ? 'on' : 'off' }}</w-button>
  14. <w-dialog
  15. visible="{{ visible2 }}"
  16. bind:close="handleClose"
  17. >
  18. <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
  19. <text>wuss 一款高质量,组件齐全,高自定义的微信小程序UI组件库</text>
  20. <w-button bind:onClick="handleClose" type="info">Close</w-button>
  21. </view>
  22. </w-dialog>
  23. <w-pane desc="MaskClose = False" />
  24. <w-button bind:onClick="handleClick" data-id="3" type="info">{{ visible3 ? 'on' : 'off' }}</w-button>
  25. <w-dialog
  26. visible="{{ visible3 }}"
  27. maskClose="{{ false }}"
  28. bind:close="handleClose"
  29. >
  30. <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
  31. <text>点击遮罩层是无法关闭该对话框的哟~</text>
  32. <w-button bind:onClick="handleClose" type="info">Close</w-button>
  33. </view>
  34. </w-dialog>

API

Attribute 属性

属性说明类型默认值
visible显示/隐藏booleanfalse
widthdialog 的内容区宽度.默认 80%string-
maskClose点击遮罩层是否可以关闭?booleanfalse
heightdialog 的内容区高度,可选string-

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类