half-screen-dialog 半屏弹窗

优质
小牛编辑
136浏览
2023-12-01

半屏弹窗,辅助完成当前页面任务时;提醒用户并引导用户的下一步操作;用户主动发起的任务时。

示例代码如下:

<div :class="['weui-demo-dialog', istrue ? 'weui-demo-dialog_show' : '']">
  <div class="weui-mask" @click="closeDialog"></div>
  <div class="weui-half-screen-dialog" catchtouchmove>
    <div class="weui-half-screen-dialog__hd">
      <div class="weui-half-screen-dialog__hd__side">
        <div @click="closeDialog" class="weui-icon-btn weui-icon-btn_close">关闭</div>
      </div>
      <div class="weui-half-screen-dialog__hd__main">
        <text class="weui-half-screen-dialog__title">标题</text>
        <text class="weui-half-screen-dialog__subtitle">标题</text>
      </div>
      <div class="weui-half-screen-dialog__hd__side">
        <div class="weui-icon-btn weui-icon-btn_more">更多</div>
      </div>
    </div>
    <div class="weui-half-screen-dialog__bd">
      <div class="weui-half-screen-dialog__desc">辅助描述内容,可根据实际需要安排</div>
      <div class="weui-half-screen-dialog__tips">辅助提示内容,可根据实际需要安排</div>
    </div>
    <div class="weui-half-screen-dialog__ft">
      <button type="default" class="weui-btn">辅助操作</button>
      <button type="primary" class="weui-btn">主操作</button>
    </div>
  </div>
</div>

效果