Dialog 弹出框

使用指南

一般用法

<tms-dialog show="{{show}}" content="{{content}}" bind:onconfirm="onClickConfirm"/>

Component({
  data: {
    show: false,
    title: 'title',
    loading: false,
  },
  methods: {
    onClickConfirm() {
      this.setData({
        show: false,
      });
    },
  }
})

无遮罩层

<tms-dialog show="{{show}}" content="{{content}}" show-cover="{{false}}" bind:onconfirm="onClickConfirm"/>

文字居左

<tms-dialog show="{{show}}" content="{{content}}" textAlign="left" bind:onconfirm="onClickConfirm"/>

标题

<tms-dialog show="{{show}}" content="{{content}}" title="{{title}}" bind:onconfirm="onClickConfirm"/>

使用slot正文

<tms-dialog show="{{show}}" title="标题" bind:onconfirm="onClickConfirm">
  <view class="slot-body" slot="slot-body"></view>
</tms-dialog>

显示取消按钮

<tms-dialog show="{{show}}" show-cancel-button bind:onconfirm="onClickConfirm"/>

点击遮罩层关闭窗口

<tms-dialog show="{{show}}" close-on-click-cover/>

显示loading，异步关闭

<tms-dialog show="{{show}}" loading="{{loading}}" content="{{content}}" bind:onconfirm="onClickConfirmAsync"/>

Component({
  data: {
    show: false,
    content: 'content',
    loading: false,
  },
  methods: {
    onClickConfirmAsync() {
      this.setData({
        loading: true,
      });
      setTimeout(() => {
        this.setData({
          show: false,
          loading: false,
        });
      }, 3000);
    },
  }
})

自定义button文案

<tms-dialog show="{{show}}" content="{{content}}" cancel-text="不是" confirm-text="是的" bind:onconfirm="onClickConfirm"/>

使用slot确认button

<tms-dialog show="{{show}}" title="标题" content="{{content}}">
  <button slot="confirm-view"  bindtap="onAuthUserProtocol">同意授权</button>
</tms-dialog>

API

属性	说明	类型	默认值	版本
show	控制dialog的显示和关闭	boolean	false
title	弹框标题	string	-
text-align	文本对齐方式,可选left、center、right	string	center
confirm-text	确定按钮的文案	string	确定
cancel-text	取消按钮的文案	string	取消
content	弹框正文	string	-
duration	弹框动画的执行时间	number	500ms
custom-confirm	自定义确认按钮视图	boolean	false
z-index	自定义按钮组件的z-index	boolean	false
loading	显示按钮载入状态	boolean	false
show-cancel-button	是否显示取消按钮	boolean	false
show-cover	是否显示遮罩层	boolean	false
close-on-click-cover	是否点击遮罩层关闭弹窗	boolean	false

EVENTS

属性	说明	类型
bind:on-confirm	点击确定按钮时的回调	(event) => {}
bind:on-cancel	点击取消按钮时的回调	(event) => {}
bind:on-click-overlay	点击遮罩层的回调	(event) => {}

slot

属性	说明
slot-body	自定义中间区域视图，content为空时生效
confirm-view	自定义确认区域视图，custom-confirm为true生效

CSS变量

// 对话框默认宽度
--dialog-width: 536rpx;
// 小屏手机上的宽度
--dialog-small-screen-width: 90%;
// 标题字体大小
--dialog-header-font-size: 32rpx;
// 圆角大小
--dialog-border-radius: 24rpx;
// 正文字体大小
--dialog-message-font-size: 32rpx;
// 正文line-height
--dialog-message-line-height: 42rpx;
// 正文最大高度
--dialog-message-max-height: 60vh;
// 对话框取消按钮字体颜色
--dialog-cancel-color: #000;

FAQ