# Dialog 弹出框

<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>