用户弹窗测试

多语言配置测试页面

多语言测试: （目前不支持多语言切换，只在刷新或者重新进入的时候加载本身语言的配置）

邮箱: Email

电话: Phone

下一步: Next

确认: OK

英语 (en)
中文简体 (zh)
中文繁体 (zh-TW)
日语 (ja)
韩语 (ko)
西班牙语 (es)
葡萄牙语 (pt)
泰语 (th)
印尼语 (id)

基础元素演示

Button 按钮

Dialog 对话框

Select 选择器

当前选择：option1

Select 选择器(多选)

当前选择：

Popover 气泡卡片

Drawer 抽屉

Input 输入框

输入内容：

Textarea 多行输入

输入内容：

useCopyText 复制功能测试

预设文本测试：

• 复制后可以在其他地方粘贴（Ctrl+V 或 Cmd+V）验证

• 方式1测试: useCopyText(text)

• 方式2测试: useCopyText({ el: element, text: text })

Icon 图标用法

基础用法

按钮内嵌 icon

状态指示 icon

评分/收藏 icon

交互/切换 icon

列表/导航 icon

FullLoader 全屏加载（全局 loading store）

InlineLoader 行内加载（变量A）

v-inline-loader 指令（变量B）

Confirm 确认弹窗（composables/useConfirm）

ImagePreview 图片预览

Lottie 动画演示

基础动画示例（默认占位）

速度:

状态: 加载中...

带控制面板

SVG 渲染

Canvas 渲染

自定义占位示例

加载中...

图标占位

渐变占位

动画加载中

动画占位

Lottie 动画使用说明

• 支持 SVG、Canvas、HTML 三种渲染方式

• 可控制播放、暂停、速度、方向等

• 支持本地文件和在线动画链接

• 支持自定义占位内容：使用 #placeholder slot

• 动画加载时显示占位，加载完成后平滑过渡到动画

• 使用 body-class 属性控制容器样式

• 基于 lottie-web 库实现

• 动画文件可通过 Adobe After Effects + Bodymovin 导出

代码示例：

<LottiePlayer
  path="/assets/lottie/animation.json"
  body-class="w-32 h-32"
  :show-controls="true"
>
  <template #placeholder>
    <div class="loading-content">
      <Icon name="mdi:loading" class="animate-spin" />
      <span>加载中...</span>
    </div>
  </template>
</LottiePlayer>