xtf-toast

组件说明

xtf-toast 是轻提示组件，适用于操作反馈和状态提示；同时支持声明式和 service 命令式调用。 核心能力以当前 xtf-toast.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <view>
    <xtf-button label="提示" @click="value = true" /><xtf-toast
      :show="value"
      message="保存成功"
      @update:show="value = $event"
  /></view>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <view>
    <xtf-button label="加载" @click="value = true" /><xtf-toast
      :show="value"
      type="loading"
      message="正在提交"
      :duration="0"
  /></view>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <xtf-toast :show="value" style-type="light" layout="stack">
    <template #icon><xtf-icon name="verified" theme="success" /></template>
    <xtf-text text="资料已更新" />
  </xtf-toast>
</template>

<script>
export default {
  data() {
    return { value: true }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
service	Boolean	false	控制组件的 service 行为。	按业务需要设置。
show	Boolean	false	控制组件的 show 行为。	按业务需要设置。
message	String	''	控制组件的 message 行为。	按业务需要设置。
text	String	''	控制组件的 text 行为。	按业务需要设置。
title	String	''	控制组件的 title 行为。	按业务需要设置。
type	String	'info'	控制组件的 type 行为。	按业务需要设置。
duration	[String, Number]	''	控制组件的 duration 行为。	按业务需要设置。
position	String	'center'	控制组件的 position 行为。	按业务需要设置。
offsetX	[String, Number]	0	控制组件的 offsetX 行为。	按业务需要设置。
offsetY	[String, Number]	0	控制组件的 offsetY 行为。	按业务需要设置。
overlay	Boolean	false	控制组件的 overlay 行为。	按业务需要设置。
closeOnClickOverlay	[Boolean, String]	false	控制组件的 closeOnClickOverlay 行为。	按业务需要设置。
showIcon	Boolean	true	控制组件的 showIcon 行为。	按业务需要设置。
icon	String	''	控制组件的 icon 行为。	按业务需要设置。
allowHtml	Boolean	false	控制组件的 allowHtml 行为。	按业务需要设置。
styleType	String	'solid'	控制组件的 styleType 行为。	按业务需要设置。
layout	String	'inline'	控制组件的 layout 行为。	按业务需要设置。
closeable	Boolean	false	控制组件的 closeable 行为。	按业务需要设置。
beforeClose	Function	null	控制组件的 beforeClose 行为。	按业务需要设置。
zIndex	[String, Number]	''	控制组件的 zIndex 行为。	按业务需要设置。
customClass	String	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object]	''	控制组件的 customStyle 行为。	按业务需要设置。

---

事件

事件名称	触发时机	回调参数	参数说明
update:show	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:show', ...) 为准。
open	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('open', ...) 为准。
opened	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('opened', ...) 为准。
close	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('close', ...) 为准。
closed	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('closed', ...) 为准。
blocked-close	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('blocked-close', ...) 为准。
click-overlay	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('click-overlay', ...) 为准。

事件使用示例

<template>
  <xtf-toast @update:show="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

插槽

插槽名	说明	作用域参数
default	替换标题与消息内容区域。	无
icon	替换内置状态图标区域。	无

当前源码以 content 具名插槽是否存在作为判断条件，却渲染默认插槽；因此 #content 不会输出内容。请使用默认插槽，且不要同时传入 #content。

---

方法

open(options)：打开提示；close(source)：请求关闭提示。

使用示例：

this.$refs.toast.open({ message: '保存成功' })
this.$refs.toast.close('api')

---

主题说明

• var(--xtf-color-success) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-success-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-danger) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-danger-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-warning) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-warning-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-toast-safe-top-gap) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-toast-safe-bottom-gap) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-toast-side-gap) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-toast-duration) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

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