Half-screen Dialog 半屏对话框

基本用法

<wx-button @click="visi = true" type="light">例子一</wx-button>
<wx-half-screen-dialog title="标题" :visible.sync="visi">
  <div style="height: 50px;">可放自定义内容</div>
</wx-half-screen-dialog>

<script>
export default {
  data() {
    return {
      visi: false
    };
  }
};
</script>

提示

visible 属性绑定需要使用 .sync修饰符

综合示例

<wx-button @click="visi2 = true" type="light">例子二</wx-button>
<wx-half-screen-dialog title="标题" desc="副标题" :visible.sync="visi2">
  <p class="weui-half-screen-dialog__desc">辅助描述内容，可根据实际需要安排</p>
  <p class="weui-half-screen-dialog__tips">辅助提示内容，可根据实际需要安排</p>
  <template #footer>
    <wx-button @click="visi2 = false" type="light">取消</wx-button>
    <wx-button @click="visi2 = false">确定</wx-button>
  </template>
</wx-half-screen-dialog>

<script>
export default {
  data() {
    return {
      visi2: false
    };
  }
};
</script>

Half-screen Dialog Attributes

参数	说明	类型	可选值	默认值
visible	是否可见，需结合 .sync 修饰符	Boolean	-	false
title	标题内容	String	-	-
desc	副标题内容	String	-	-
className	自定义类名	String	-	-

半屏对话框