Alert

提示框组件，拦截 <alert> 标签，支持四种类型。

演示

<alert type="info">正在检索相关资料...</alert> <alert type="warn">结果来自缓存，可能不是最新数据</alert>

---

ℹ信息

正在检索相关资料...

⚠警告

结果来自缓存，可能不是最新数据

<template>
  <div>
    <Input v-model="text" :rows="4" :simulate-text="exampleText" />

    <hr>

    <div>
      <StreamContains :model-value="text" mode="accurate">
        <Alert />
      </StreamContains>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains, Alert } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = '<alert type="info">正在检索相关资料...</alert>\n<alert type="warn">结果来自缓存，可能不是最新数据</alert>'
const text = ref(exampleText)
</script>

使用

<StreamContains :model-value="text" mode="accurate">
  <Alert />
</StreamContains>

示例

<alert type="error">数据库连接失败</alert>
<alert type="warn">返回结果可能不完整</alert>
<alert type="info">正在检索相关资料...</alert>
<alert type="success">处理完成</alert>

Props

属性	类型	来源	说明
content	string	标签内文本	提示消息
isClosed	boolean	注入	是否已闭合
attrs.type	string	标签属性	error / warn / info / success，默认 info

未闭合时在标题栏显示闪烁光标。

CLI

npx @huiol/stream-ui add alert