弹窗 Dialog

弹出对话窗，常用于确认、提示等场景。支持 API 式调用和 DOM 式调用。

使用

API

安装使用

备注

小程序在机制上不允许动态插入 DOM。

当 API 调用时，需要在外层先引入 <ti-dialog id="titian-dialog" /> 组件，再使用 js 获取该组件实例、并设置该组件。

当使用声明式 DOM 调用时，跟常规组件一样，在 json 和 wxml 中引入即可。

• index.json
• index.js
• index.wxml

code

{
  // 原生小程序
  "usingComponents": {
    "ti-dialog": "@titian-design/weapp/dialog/index"
  },
  // titan-cli 搭建的项目
  "usingComponents": {
    "ti-dialog": "platform://titian-mp/ti-dialog"
  }
}

// 原生小程序
import { $tiDialog } from "@titian-design/weapp/index";

// titan-cli 搭建的项目
const { $tiDialog } = requirePlatform("@titian-design/weapp").main;

<ti-dialog id="titian-dialog" />

用法示例

基本使用

展示

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="show">展示</ti-button>
<ti-dialog id="titian-dialog" />

copy

code

Page({
  show() {
    // eslint-disable-next-line
    $tiDialog().show({
      title: 'Confirm标题',
      content: '内容',
      cancelBtnText: '取消',
      isTextButton: false,
      hasCancelButton: true,
      confirmBtnText: '确定',
    });
  },
});

使用 DOM 和插槽

展示

插槽

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="show">展示</ti-button>
<ti-dialog
  title="{{attrs.title}}"
  use-content-slot="{{attrs.useContentSlot}}"
  content="{{attrs.content}}"
  cancel-btn-text="{{attrs.cancelBtnText}}"
  is-text-button="{{attrs.isTextButton}}"
  has-cancel-button="{{attrs.hasCancelButton}}"
  confirm-btn-text="{{attrs.confirmBtnText}}"
  visible="{{visible}}"
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
  bind:close="onClose"
  >
<view>插槽</view>
</ti-dialog>

copy

code

Page({
  data: {
    visible: false,
    attrs: {
      title: 'Show标题',
      content: '内容',
      useContentSlot: '',
      cancelBtnText: '取消',
      isTextButton: false,
      hasCancelButton: true,
      confirmBtnText: '确定',
    },
  },
  show() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
  onConfirm() {
    console.log('声明式调用 - dialog onConfirm!');
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
  onCancel() {
    console.log('声明式调用 - dialog onCancel!');
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
  onClose() {
    console.log('声明式调用 - dialog onClose!');
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

常规 API 式调用

$tiDialog().show({
  title: "Confirm标题",
  content: "内容",
  cancelBtnText: "取消",
  isTextButton: false,
  hasCancelButton: true,
  confirmBtnText: "确定",
  onCancel() {},
  onConfirm() {},
  onClose() {}
});

$tiDialog.close();

使用 selector

备注

selector: 用作 selectComponent API 的参数；指定 <ti-dialog> 元素的 id，默认为 titian-dialog。

ctx: 指定 selector 选择器的上下文范围。

$tiDialog().show({
  selector: "#titian-dialog",
  title: "",
  content: "",
  cancelBtnText: "取消",
  isTextButton: false,
  hasCancelButton: true,
  confirmBtnText: "确定",
  onCancel() {},
  onConfirm() {},
  onClose() {}
});

$tiDialog().show({
  ctx: this,
  selector: "#titian-dialog",
  title: "",
  content: "",
  cancelBtnText: "取消",
  isTextButton: false,
  hasCancelButton: true,
  confirmBtnText: "确定",
  onCancel() {},
  onConfirm() {},
  onClose() {}
});

ti-dialog API

属性 Properties

名称	类型	必填	默认值	说明	备注
title	string	否	-	标题	-
content	string	否	-	内容	-
z-index	number	否	12000	z-index	-
has-cancel-button	boolean	否	false	是否展示取消按钮	-
close-on-mask	boolean	否	true	点击遮罩是否关闭对话框	-
close-on-actions	boolean	否	true	点击确认和取消按钮，是否关闭对话框	-
is-text-button	boolean	否	false	是否为文字按钮	-
cancel-btn-text	string	否	取消	取消按钮的文案	-
confirm-btn-text	string	否	确定	确定按钮的文案	-
confirm-button-color	string	否	-	确认按钮的颜色	-
confirm-button-bg-color	string	否	-	确认按钮的背景颜色	-
cancel-button-color	string	否	-	取消按钮的颜色	-
cancel-button-bg-color	string	否	-	取消按钮的背景颜色 -
use-content-slot	string	否	-	使用自定义内容的 slot	-
use-actions-slot	string	否	-	使用自定义按钮的 slot	-
prevent-scroll	string	否	true	是否锁定背景滚动	-

事件 Events

名称	参数列表	描述	备注
bind:cancel	-	点击取消按钮时触发	-
bind:confirm	-	点击确认按钮时触发	-
bind:close	-	当关闭时触发	-

插槽 Slots

名称	说明	备注
default	内容	-
actions	自定义按钮插槽	当 use-actions-slot 为 true 时可用
before-title	标题前插槽	当 title 为 true 时可用

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-
ext-popup-class	popup/ext-class	-
ext-popup-mask-class	popup/ext-mask-class	-
ext-popup-content-class	popup/ext-content-class	-
ext-inner-class	内部样式	-
ext-title-class	标题样式	-
ext-content-class	内容样式	-
ext-actions-class	行为区样式	-
ext-actions-confirm-class	确认样式	-
ext-actions-cancel-class	取消样式	-

CSS 变量 CSS Variables

变量	默认值	说明	默认
--dialog-actions-border-top-color	theme.color.gray.border.50	按钮区域分割线颜色（textbutton模式下）
--dialog-actions-cancel-border-color	theme.color.gray.border.250	取消按钮描边颜色（button模式下）
--dialog-actions-cancel-color	theme.color.gray.texticon.550	取消按钮文字颜色
--dialog-actions-gap	theme.spacing.gap.g4	按钮间距（button模式下）
--dialog-actions-space-bottom	theme.spacing.vertical.v12	按钮区域 - 底部间距
--dialog-actions-space-horizontal	theme.spacing.horizontal.h12	按钮区域 - 左右边距
--dialog-content-color	theme.color.gray.texticon.900	内容文字，颜色
--dialog-content-font-size	theme.fontSize.t7	内容文字，字号
--dialog-content-font-weight	theme.fontWeight.regular	内容文字，字重
--dialog-content-line-height	theme.lineHeight.multiline.t7	内容文字，行高
--dialog-inner-padding-bottom	theme.spacing.vertical.v11	容器内下Padding
--dialog-inner-padding-h	theme.spacing.horizontal.h12	容器内左右Padding（不包括确认按钮）
--dialog-inner-padding-top	theme.spacing.vertical.v14	容器内上Padding
--dialog-popup-box-bg-color	theme.color.gray.background.default	弹窗容器背景色
--dialog-popup-mask-bg-color	theme.color.gray.mask.800	遮罩背景颜色
--dialog-popup-radius	theme.borderRadius.r4	弹窗圆角
--dialog-title-color	theme.color.gray.texticon.900	标题颜色
--dialog-title-font-size	theme.fontSize.t9	标题字号
--dialog-title-font-weight	theme.fontWeight.semibold	标题字重
--dialog-title-line-height	theme.lineHeight.multiline.t8	标题行高
--dialog-title-margin-bottom	theme.spacing.gap.g5	标题与内容文字间距gap
--dialog-width	560rpx	组件宽度	-
--dialog-min-height	300rpx	组件最小高度	-
--dialog-actions-height	88rpx	按钮区高度	-