xtf-dialog

组件说明

xtf-dialog 是对话框组件，用于展示信息、确认操作和收集输入。支持多种类型（默认/信息/成功/警告/危险/输入/选择/操作列表）、预设图标、自定义按钮、输入框、选项列表和命令式调用，适用于操作确认、表单输入和操作菜单等场景。

---

基础用法

1. 确认对话框

通过 title 和 message 设置标题和内容：

<template>
  <view>
    <xtf-button label="确认删除" theme="danger" @click="showDialog = true" />
    <xtf-dialog
      v-model:show="showDialog"
      title="删除确认"
      message="确定要删除这条记录吗？此操作不可撤销。"
      theme="danger"
      @confirm="showDialog = false"
      @cancel="showDialog = false"
    />
  </view>
</template>

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

2. 预设类型

通过 type 使用预设样式：

<template>
  <view style="display: flex; gap: 12rpx; flex-wrap: wrap">
    <xtf-button label="信息" theme="info" @click="openPreset('info')" />
    <xtf-button label="成功" theme="success" @click="openPreset('success')" />
    <xtf-button label="警告" theme="warning" @click="openPreset('warning')" />
    <xtf-button label="危险" theme="danger" @click="openPreset('danger')" />
    <xtf-dialog
      v-model:show="presetVisible"
      :type="presetType"
      title="提示"
      message="这是一条预设类型的对话框消息。"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      presetVisible: false,
      presetType: 'info'
    }
  },
  methods: {
    openPreset(type) {
      this.presetType = type
      this.presetVisible = true
    }
  }
}
</script>

3. 输入对话框

通过 type="prompt" 启用输入框：

<template>
  <view>
    <xtf-button label="输入备注" @click="showInput = true" />
    <xtf-dialog
      v-model:show="showInput"
      type="prompt"
      title="备注"
      input-placeholder="请输入备注内容"
      :input-maxlength="200"
      @confirm="showInput = false"
    />
  </view>
</template>

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

4. 操作列表

通过 type="actions" 显示操作列表：

<template>
  <view>
    <xtf-button label="更多操作" @click="showActions = true" />
    <xtf-dialog
      v-model:show="showActions"
      type="actions"
      title="操作"
      :actions="actionList"
      @action="onAction"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showActions: false,
      actionList: [
        { label: '编辑', icon: 'edit', theme: 'primary' },
        { label: '复制', icon: 'copy', theme: 'primary' },
        { label: '删除', icon: 'delete', theme: 'danger', danger: true }
      ]
    }
  },
  methods: {
    onAction({ action }) {
      console.log('选择操作：', action.label)
      this.showActions = false
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
show	Boolean	false	是否显示	显示控制
title	String	''	标题	标题
subtitle	String	''	副标题	副标题
type	String	'default'	类型：'default' / 'info' / 'success' / 'warning' / 'danger' / 'prompt' / 'textarea' / 'select' / 'multi-select' / 'actions'	类型
message	String	''	消息内容	内容
content	String	''	内容（同 message）	内容
description	String	''	描述文字	描述
confirmText	String	''	确认按钮文字	按钮
cancelText	String	''	取消按钮文字	按钮
showCancel	Boolean	true	是否显示取消按钮	按钮
service	Boolean	false	使用 dialogManager 的服务模式	服务模式
preset / iconTheme / iconColor / align / showCloseIcon	String / Boolean	'' / false	图标、对齐和关闭图标控制	展示
closeOnPressEscape / beforeClose / lockScroll	Boolean | String / Function / Boolean | String	false / null / true	关闭拦截及滚动锁定	关闭行为
confirmLoading / cancelLoading / footerNote / footerStyle	Boolean / String	false / ''	操作按钮与底部显示控制	底部
optionValue / optionValues / optionRequired / optionSearchable	多类型 / Array / Boolean	'' / [] / false	单选、多选及检索控制	选项
inputType / inputLabel / inputRows / inputRequired / inputAutoFocus	多类型	'text' / '' / 4 / false / false	内置输入框配置	输入
optionSearchPlaceholder / optionHelper	String	'' / ''	选项搜索框占位文字、搜索框下方辅助说明	选项
overlay	Boolean	true	是否显示遮罩	遮罩
overlayStyle / overlayBlur	String | Object | Array / String | Number	'' / 0	遮罩自定义样式与背景模糊强度，数字按 rpx 处理	模糊遮罩
closeOnClickOverlay	Boolean | String	false	点击遮罩是否关闭	关闭行为
asyncClose	Boolean	false	是否异步关闭	异步关闭
draggable / fullscreen	Boolean	false / false	添加对应样式状态：可拖拽样式标记、全屏对话框	布局
loading	Boolean	false	是否加载中	加载状态
theme	String	'primary'	主题色	主题
avatar	String	''	头像 URL	头像
icon	String	''	图标名称	图标
actions	Array	[]	操作按钮列表	操作列表
showInput	Boolean	false	是否显示输入框	输入框
options	Array	[]	选项列表	选项
inputValue	String | Number	''	输入框值	输入值
inputPlaceholder	String	''	输入框占位符	占位符
inputMaxlength	String | Number	140	最大输入长度	长度限制
width	String | Number	'620rpx'	对话框宽度	宽度
radius	String | Number	32	圆角大小	圆角
buttonDirection	String	'horizontal'	按钮方向	按钮方向
titleStyle / bodyStyle / footerCustomStyle	String | Object | Array	''	标题区、内容区、底部操作区自定义样式	对话框区域样式
zIndex / duration	String | Number	'' / ''	透传给内部弹层的层级和动画时长	弹层
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
confirm	点击确认按钮时触发	(detail)	确认详情
cancel	点击取消按钮时触发	-	-
action	点击操作列表项或自定义 actions 按钮时触发	(payload)	含 action、index、value、optionValue（仅操作列表）、type、preset；自定义按钮还含原始 event
option-select	选择选项时触发	(option)	选中的选项
input-change	输入值变化时触发	(value)	输入值
open	打开时触发	-	-
close	关闭时触发	-	-
update:show	显示状态变化时触发	(show)	显示状态
update:inputValue / update:optionValue / update:optionValues	输入或选择变化	(value)	对应双向绑定值
opened / closed / click-overlay / blocked-close	弹层生命周期	(payload) 或无参数	透传 popup 生命周期
confirm-detail / cancel-detail	确认或取消时	(payload)	含 source、value、选项和值列表

插槽

title 替换标题，默认插槽替换正文，footer 替换整个底部。

<template>
  <xtf-dialog v-model:show="show" title="删除" @confirm-detail="confirm">
    <template #footer><xtf-button label="关闭" @click="show = false" /></template>
    <text>自定义正文</text></xtf-dialog>

</template>
<script>
export default {
  data() {
    return { show: true }
  },
  methods: {
    confirm(payload) {
      console.log(payload.value)
    }
  }
}
</script>

---

主题说明

• 弹出层使用 xtf-popup 组件
• 按钮使用 xtf-button 组件
• 输入框使用 xtf-input 组件
• 图标使用 xtf-icon 组件
• 文字使用 xtf-text 组件

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。