Feedback Widget
将反馈触发器展开为表单，包含发送、成功和重试状态。
适用场景
- 当界面需要以下行为时使用 Feedback Widget：将反馈触发器展开为表单，包含发送、成功和重试状态。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/feedback-widget.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
packages/vue/src/blocks/feedback-widget/demo.vue
<script setup lang="ts">
import { FeedbackWidget } from "@/components/orvui/blocks/feedback-widget";
let submissions = 0;
async function submit() {
await new Promise<void>((resolve) => setTimeout(resolve, 900));
if (++submissions === 1) throw new Error("Preview submission failed");
}
</script>
<template>
<div
class="relative h-80 w-full max-w-md overflow-hidden rounded-2xl border border-border bg-background"
>
<div class="border-b border-border px-5 py-3">
<div class="h-2.5 w-24 rounded-full bg-muted-foreground/20" />
</div>
<div class="flex flex-col gap-3 p-5">
<div class="h-2.5 w-3/4 rounded-full bg-muted-foreground/15" />
<div class="h-2.5 w-1/2 rounded-full bg-muted-foreground/15" />
<div class="h-24 w-full rounded-xl bg-muted-foreground/[0.06]" />
<div class="h-2.5 w-2/3 rounded-full bg-muted-foreground/15" />
</div>
<FeedbackWidget :on-submit="submit" />
</div>
</template>
packages/vue/src/blocks/feedback-widget/src/FeedbackWidget.vue
状态与事件
此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。
API 参考
position?"bottom-left" | "bottom-right""bottom-right"title?string"Help us improve"placeholder?string"Share an idea or report a bug"icon?boolean | null | string | number | void | VNode<RendererNode, RendererElement, { [key: string]: any; }> | VNodeArrayChildren | ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> | FunctionalComponent<any, {}, any, {}> | ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions>undefinedonSubmit?(data: FeedbackData) => void | Promise<void>—事件
success[data: FeedbackData]@successerror[error: unknown]@error无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Feedback Widget？
- 通过 position、title、placeholder、icon、onSubmit 配置 Feedback Widget；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 success、error，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
请留意
部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。
更新于
来源与许可 ↗MIT · 0.1.1