Dialog 弹出框

使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-dialog": "wuss-weapp/w-dialog/index",
}

视频演示

代码演示

<w-pane title="Dialog" desc="弹出框" />
<w-pane desc="Pic" />
<w-button bind:onClick="handleClick" data-id="1" type="info">{{ visible1 ? 'on' : 'off' }}</w-button>
<w-dialog
 visible="{{ visible1 }}"
 bind:close="handleClose"
>
 <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
   <image style="width: 100%;height: 300px;" class="" src="/pages/assets/logo.png" ></image>
 </view>
</w-dialog>
<w-pane desc="Button Close" />
<w-button bind:onClick="handleClick" data-id="2" type="info">{{ visible2 ? 'on' : 'off' }}</w-button>
<w-dialog
 visible="{{ visible2 }}"
 bind:close="handleClose"
>
 <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
   <text>wuss 一款高质量，组件齐全，高自定义的微信小程序UI组件库</text>
   <w-button bind:onClick="handleClose" type="info">Close</w-button>
 </view>
</w-dialog>
<w-pane desc="MaskClose = False" />
<w-button bind:onClick="handleClick" data-id="3" type="info">{{ visible3 ? 'on' : 'off' }}</w-button>
<w-dialog
 visible="{{ visible3 }}"
 maskClose="{{ false }}"
 bind:close="handleClose"
>
 <view class="example-dialog" hover-class="none" hover-stop-propagation="false">
   <text>点击遮罩层是无法关闭该对话框的哟~</text>
   <w-button bind:onClick="handleClose" type="info">Close</w-button>
 </view>
</w-dialog>

API

Attribute 属性

Event 事件

Slot 插槽

Class 自定义类名