bolt-ui 组件测试

Toast / Dialog 组件行为验证页

Toast 测试

Dialog 测试

基于 bolt-ui <BoDialog>

基础用法

v-model:show 控制显示，监听 close 事件

位置模式

center / bottom / top

关闭控制

maskCanClose=false 禁止点击遮罩关闭

关闭回调

累计触发次数: 0

动画

:animation="false" 关闭所有过渡

Dialog 动画方向

animation 传入方向名: slide-fade / bottom-fade / top-fade / left-fade / right-fade

Mask 动画方向

maskAnimation 传入方向名: fade / left / right / top / bottom

关闭后销毁

destoryOnClose=true 关闭后销毁内容

placeholder 插槽

作为 bo-dialog__content 的同级锚点，在 <style scoped> 中通过兄弟选择器控制 dialog 内部样式

容器内模式 (inBox)

Dialog 限定在容器范围内

嵌套 Dialog

基于 DialogToken 识别父子，父级 teleport 会被禁用

事件冒泡控制

stopPropagation=false 时点击内容会冒泡到遮罩

居中边距

noCenterYMargin=true 取消上下内边距

宽度 · 固定 px

:style 对象传入 width: 600px

宽度 · 百分比

:style="{ width: '80%' }" 撑满父容器

宽度 · max / min

min-width 320px, max-width 800px

宽度 · 字符串

:style 接受 string 形式

MdEditor 测试

基于 bolt-ui <BoMdEditor>

编辑器加载中…

查看 v-model 原始值（254 字符）

# 欢迎使用 Markdown 编辑器

这是一段**粗体**和*斜体*以及~~删除线~~的示例。

## 功能列表

- 支持标题（H1-H6）
- 支持**粗体**与*斜体*
- 支持行内 `code` 与代码块
- 支持 [链接](https://example.com)

> 这是一段引用文字，适合用于突出重要内容。

```ts
const greeting: string = "Hello, world!"
console.log(greeting)
```

---

最后来一段普通段落。