跳到主要内容

弹窗 Dialog

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

API

安装使用​

import { $tiDialog } from '@titian-design/mobile-vue';

用法示例​

常规 API 式调用​

<template>
</template>

<script lang="ts" setup>
import { $tiDialog } from '@titian-design/mobile-vue'

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

$tiDialog.close()
</script>

使用 DOM 和插槽​

<template>
  <TiDialog 
    :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" 
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <div>插槽</div>
  </TiDialog>
</template>

<script lang="ts" setup>
import { TiDialog, ref } from '@titian-design/mobile-vue'
  
const visible = ref(false);

const attrs = ref({
  title: "Show标题",
  content: "内容",
  useContentSlot: "",
  cancelBtnText: "取消",
  isTextButton: false,
  hasCancelButton: true,
  confirmBtnText: "确定",
});
  
const onConfirm = () => {
  console.log('声明式调用 - dialog onConfirm!');
  visible.value = false;;
};

const onCancel = () => {
  console.log('声明式调用 - dialog onCancel!');
  visible.value = false;;
};

const onClose = () => {
  console.log('声明式调用 - dialog onClose!');
  visible.value = false;;
};
</script>

TiDialog API​

属性 Properties​

名称类型必填默认值说明备注
titlestring否-标题-
contentstring否-内容，支持使用 \n 换行-
z-indexnumber否12000zIndex-
has-cancel-buttonboolean否false是否展示取消按钮-
close-on-maskboolean否true点击遮罩是否关闭对话框-
close-on-actionsboolean否true点击确认和取消按钮，是否关闭对话框-
is-text-buttonboolean否false是否为文字按钮-
cancel-btn-textstring否取消取消按钮的文案-
confirm-btn-textstring否确定确定按钮的文案-
confirm-button-colorstring否-确认按钮的颜色-
confirm-button-bg-colorstring否-确认按钮的背景颜色-
cancel-button-colorstring否-取消按钮的颜色-
cancel-button-bg-colorstring否-取消按钮的背景颜色 -
use-content-slotstring否-使用自定义内容的 slot-
use-actions-slotstring否-使用自定义按钮的 slot-
teleportElement否document.bodyDOM 挂载节点-
prevent-scrollboolean否true是否锁定背景滚动；实现上采用 document.body.style.overflow = 'hidden' 方式，内部可以滚动。-

事件 Events​

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

插槽 Slots​

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

外部样式类 External Classes​

名称说明备注
extClass根节点样式类-
ext-popup-classpopup/ext-class-
ext-popup-mask-classpopup/ext-mask-class-
ext-popup-content-classpopup/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-popup-mask-bg-color@popup-mask-bg-color遮罩背景色-
--dialog-popup-radius@popup-radius弹窗圆角-
--dialog-popup-box-bg-color@popup-box-bg-color弹窗背景色-
--dialog-width560px组件宽度-
--dialog-min-height300px组件最小高度-
--dialog-inner-padding-v58px 0 44px 0内容区垂直方向内边距-
--dialog-inner-padding-h48px内容区水平方向内边距-
--dialog-inner-title-colorvar(--neutral-color-1, #212121)内容区标题颜色-
--dialog-inner-content-colorvar(--neutral-color-1, #212121)内容区颜色-
--dialog-actions-height88px按钮区高度-
--dialog-actions-gap32px按钮区按钮间距-
--dialog-actions-border-top-colorvar(--neutral-color-6, #f2f2f2)按钮区上边线颜色-
--dialog-actions-space48px按钮区按钮内边距-
--dialog-actions-cancel-color#757575按钮区取消按钮颜色-
--dialog-actions-cancel-border-color#212121按钮区取消按钮边线颜色-
--dialog-actions-cancel-active-colorrgba(33, 33, 33, 0.1)按钮区取消按钮按压颜色-