# @desource/context7-widget-vue 中文文档 规范地址：https://npmcn.com/package/%40desource/context7-widget-vue/ 版本：0\.2\.3 npm 元数据更新时间：2026-10-31T16:12:45.402Z 中文译文更新时间：2026-11-12T01:37:56.348Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40desource/context7-widget-vue 原文对照：https://npmcn.com/package/%40desource/context7-widget-vue/?lang=original 项目主页：https://github.com/DeSource-Labs/context7-widget/tree/main/packages/vue#readme 源码仓库：https://github.com/DeSource-Labs/context7-widget ## 关键信息（来自 npm 元数据） - 包体积（解压后）：96.1 kB，8 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：vue ^3\.5\.0 - 首次发布：2026-09-09T22:04:36.574Z - 最新版本发布：2026-10-31T16:12:45.085Z - 近 30 天下载量：17097（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：5（近 12 个月 5 个） ## 中文简介 本地 Vue 3 组件和可自定义的 Context7 文档聊天部件 . ## 安装 ```sh npm install @desource/context7-widget-vue ``` 也可以使用：`pnpm add @desource/context7-widget-vue`、`yarn add @desource/context7-widget-vue`、`bun add @desource/context7-widget-vue` ## README # @ desource/context7-widget-vue (英语) [![Vue](https://img.shields.io/npm/v/@desource/context7-widget-vue?color=blue&logo=vue.js)](https://www.npmjs.com/package/@desource/context7-widget-vue) [![Coverage](https://codecov.io/gh/DeSource-Labs/context7-widget/branch/main/graph/badge.svg)](https://codecov.io/gh/DeSource-Labs/context7-widget) [![SonarCloud](https://sonarcloud.io/api/project_badges/measure?project=DeSource-Labs_context7-widget&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=DeSource-Labs_context7-widget) [![Ask Context7](https://img.shields.io/badge/Ask%20Context7-059669.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDBINEMxLjc5MDg2IDAgMCAxLjc5MDg2IDAgNFYyNEMwIDI2LjIwOTEgMS43OTA4NiAyOCA0IDI4SDI0QzI2LjIwOTEgMjggMjggMjYuMjA5MSAyOCAyNFY0QzI4IDEuNzkwODYgMjYuMjA5MSAwIDI0IDBaIiBmaWxsPSIjRjdGMkU4IiBmaWxsLW9wYWNpdHk9IjAuNjUiLz4KPHBhdGggZD0iTTEwLjYgMTUuMjk5MkMxMC42IDE3LjQ5OTIgOS43MDAwNSAxOS4zOTkyIDguMjAwMDUgMjEuMDk5MkgxMS42VjIyLjc5OTJINi4zMDAwNVYyMS4xOTkyQzguMDAwMDUgMTkuMzk5MiA4LjYwMDA1IDE3Ljg5OTIgOC42MDAwNSAxNS4yOTkySDEwLjZaTTE3LjQgMTUuMjk5MkMxNy40IDE3LjQ5OTIgMTguMyAxOS4zOTkyIDE5LjggMjEuMDk5MkgxNi40VjIyLjc5OTJIMjEuN1YyMS4xOTkyQzIwIDE5LjM5OTIgMTkuNCAxNy44OTkyIDE5LjQgMTUuMjk5MkgxNy40Wk0xMC42IDEyLjY5OTJDMTAuNiAxMC40OTkyIDkuNzAwMDUgOC41OTkyMiA4LjIwMDA1IDYuODk5MjJIMTEuNlY1LjE5OTIySDYuMzAwMDVWNi43OTkyMkM4LjAwMDA1IDguNTk5MjIgOC42MDAwNSAxMC4wOTkyIDguNjAwMDUgMTIuNjk5MkgxMC42Wk0xNy40IDEyLjY5OTJDMTcuNCAxMC40OTkyIDE4LjMgOC41OTkyMiAxOS44IDYuODk5MjJIMTYuNFY1LjE5OTIySDIxLjdWNi43OTkyMkMyMCA4LjU5OTIyIDE5LjQgMTAuMDk5MiAxOS40IDEyLjY5OTJIMTcuNFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=)](https://context7.com/desource-labs/context7-widget) [![Ask DeepWiki](https://img.shields.io/badge/Ask%20DeepWiki-1c398e.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0iI2NiY2JjYiIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xOC42IDIwLjFxMS0uNiAyLjItLjZoLjNhNCA0IDAgMCAxIDIgLjdoLjJ2LjFsMSAxaC4xdi4yaC4xbC4xLjF2LjFxLjcgMSAuNyAyLjN0LS42IDIuMnYuMWwtLjIuMkE0IDQgMCAwIDEgMjMgMjhoLS4ydi4xbC0xLjQuNGgtLjVxLTEuMyAwLTIuMy0uNWwtNC4xLTIuNC04LjMgNC44djkuNWw4LjMgNC44IDguMi00LjhWMzVxMC0xLjIuNi0yLjJ2LS4xbC4yLS4yYTQgNCAwIDAgMSAxLjctMS41bDEuMy0uNGguNnExLjMgMCAyLjMuNmw0LjIgMi4zIDguMi00Ljd2LTkuNmwtOC4yLTQuNy00LjIgMi4zcS0xIC42LTIuMi42aC0uM2E0IDQgMCAwIDEtMi0uNmwtLjItLjEtMS0xaC0uMXYtLjJoLS4xbC0uMS0uMnYtLjFxLS43LTEtLjctMi4yVjguMmwtOC4yLTQuNy04LjMgNC43djkuNWw4LjIgNC44eiIvPjwvc3ZnPg==)](https://deepwiki.com/DeSource-Labs/context7-widget) [![License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/DeSource-Labs/context7-widget/blob/main/LICENSE) 上下文7 Docs 聊天,为您的 Vue app 风格 。 使用您的字体、 颜色和帮助 按钮,带有本地组件,并具有用于打开用户界面聊天的可容性. ## 为什么要使用这个部件 ? 上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 在服务周围添加一个自定义的界面 . 一个文件助理应该适合 周围的网站。 此软件包将扩展官方 上下文7 部件的基本视觉选项, 有预设, CSS 变量, 自定义 触发器,以及灵活的布局。 访客得到多行问题,可复制代码, 停止并重试控制器,然后聊天,让它们回滚并读取. 已经使用正式部件了吗 ? [切换脚本 URL](https://github.com/DeSource-Labs/context7-widget#existing-context7-widget-user) 或使用下面的 Vue 组件与您现有的 Contexe7 库。 新建为 7号背景? 在访问者评估您的库和 开始他们的第一次融合. ## 你得到的东西 - 一个本地人 `Context7Widget` 包含打入道具和事件. - A 类 `useContext7Widget` 用于控件和应用程序默认的可堆肥和插件 . - 用于自己按钮内容的触发槽,加上外部触发支持. - 共享部件样式 `styles.css` 和每个软件包一样的核心行为. ## 开始前 使用您在背景7上声称的图书馆 。 在其 **管理 – 聊天** 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 `/owner/repo` 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 [背景7 的部件设置](https://context7.com/docs/howto/chat-widget)。 。 。 . ## 安装 ```bash npm install @desource/context7-widget-vue ``` 在应用程序条目中导入样式表一次 : ```ts import '@desource/context7-widget-vue/styles.css'; ``` 在Nuxt中,相应的全球设置是: ```ts export default defineNuxtConfig({ css: ['@desource/context7-widget-vue/styles.css'] }); ``` ## 构成部分 ```vue ``` ## 可编曲 ```vue ``` 所有者挂起后自动挂起 。 打电话 `send`, (中文(简体) ), `open`,以及 来自事件处理器或部件准备好后的其他控件. 可混凝土暴露出反应性 `widget`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`,以及 `messages` 裁判员加 `mount`, (中文(简体) ), `unmount`, (中文(简体) ), `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`,以及 `getMessages`。 。 。 . `mount(overrides)` 也更新一个已拥有 部件,当反应源选项时,这些覆盖仍然有效 变化。 拥有的部件与所有者一起被默认删除; 设定 `removeOnUnmount: false` 只有当应用程序的另一部分 将拥有清理. 调用组件时的可调用 `setup`; 必要事项 `mount()` 实值 只有浏览器 。 程序化制成的部件继承所有者应用程序上下文 和默认由 `createContext7WidgetPlugin`。 。 。 . 无 `autoMount`,可堆肥使用包级登记册而不是 Vue 或 DOM 祖传. 它解决了最新注册 `widgetId`,哪个 默认为 `default`; 如果没有默认的注册, 则查找会退后 到第一个可用的部件。 复制 IDs 构成堆栈, 因此卸载 最新注册恢复了先前的注册. ## 实例 使用 `v-model:open` 当父母拥有可见度时 : ```vue ``` 使用 `useContext7Widget({ autoMount: true })` 用于路径动作,命令 调色板,或其他必需的流. 可用模式 页:1 [演示画廊](https://context7.desourcelabs.com/examples)。 。 。 . ## 插件 在自定义名称下注册本地组件并提供全应用程序默认值: ```ts import { createApp } from 'vue'; import { createContext7WidgetPlugin } from '@desource/context7-widget-vue'; createApp(App) .use( createContext7WidgetPlugin({ componentName: 'DocsWidget', defaults: { preset: 'glass', theme: 'auto' } }) ) .mount('#app'); ``` 默认由已制成的Vue组件和可混合自有部件继承; 插件不会创建第二个部件。 插件选项在 插件被创建, 因此在以后更改原选项对象时不会更改 已安装应用程序行为 . ## 受控开放状态 奥米 `open` 初始状态 `defaultOpen`启用 `v-model:open` 当 父目录拥有能见度 : ```vue ``` 组件释放 `update:open` 作为受控状态请求. `open` 财务报告和审定财务报表 `close` 只有在实际过渡后才发出生命周期通知. ## 触发模式 ```vue ``` 外部自定义触发器在捆绑后才会隐藏 Vue 浮动发射器. 缺少或延迟交付的选择器使发射机随时可用并捆绑 目标出现时自动. ## 自定义 Vue 组件将本地 Vue DOM 置于 `.context7-widget`;没有 挂载核心自定义元素。 以共享 CSS 变量自定义 : ```css .context7-widget[widget-id='docs'] { --c7-accent: #7cffb2; --c7-panel-background: #101513; --c7-panel-color: #f7f2e8; --c7-border-color: rgba(247, 242, 232, 0.18); --c7-panel-radius: 8px; } .context7-widget [part~='send-button'] { min-width: 5rem; text-transform: uppercase; } ``` ```css .context7-widget-trigger { --c7-trigger-background: #111827; --c7-trigger-border: rgba(255, 255, 255, 0.16); --c7-trigger-color: #f8fafc; --c7-trigger-focus: rgba(124, 255, 178, 0.42); --c7-trigger-radius: 8px; --c7-trigger-shadow: none; } ``` 见 [实时定制指南](https://context7.desourcelabs.com/customization) 每一个公共标志和部分. ## 道具 和事件 组件接受与核心包相同的公共部件选项: `library`, (中文(简体) ), `theme`, (中文(简体) ), `preset`, (中文(简体) ), `position`, (中文(简体) ), `color`, (中文(简体) ), `customTrigger`, (中文(简体) ), `backdrop`, (中文(简体) ), `closeOnOutsideClick`, (中文(简体) ), `defaultOpen`, (中文(简体) ), `initialMessage`, (中文(简体) ), `labels`, (中文(简体) ), `launcherLabel`, (中文(简体) ), `launcherVariant`, (中文(简体) ), `linkBaseUrl`, (中文(简体) ), `panelHeight`, (中文(简体) ), `panelWidth`, (中文(简体) ), `placeholder`, (中文(简体) ), `title`,以及 `widgetId`。 。 。 . 使用 `labels` 每个可见和辅助字符串的部分本地化, 包括归属和图书馆倒置. `Context7WidgetLabels` 导出 用于输入词典. 相对 Markdown 链接解析与上下文 7 库页面相对,除非 `linkBaseUrl` 提供文件来源. 默认与核心共享 : `position="bottom-right"`, (中文(简体) ), `preset="default"`, (中文(简体) ), `theme="auto"`, (中文(简体) ), `launcher-variant="icon"`,以及 `widget-id="default"`。一个居中 部件启用背景, 除非 `:backdrop="false"` 很明显. Vue唯一的道克级差异是 `customTrigger`数字 : | 数值 | 行为 | | --- | --- | | 删除 | 将内置的浮起式发射器 | | `true` | 把Vue 管理的触发器打开并曝光触发槽 | | id 字符串 | 用 id 绑住外部触发器, 无论是否 `#` | | CSS 选择器 | 绑住第一个匹配的外部触发器 | | 要素/剩余 | 绑定提供的外部触发元素 | 类似事件 : `ready`, (中文(简体) ), `open`, (中文(简体) ), `close`, (中文(简体) ), `cancel`, (中文(简体) ), `question`, (中文(简体) ), `first-token`, (中文(简体) ), `answer`, (中文(简体) ), `answer-complete`, (中文(简体) ), `tool-call`, (中文(简体) ), `tool-result`, (中文(简体) ), `error`,以及 `update:open`。 。 。 . 每个处理器都会收到被打出的事件细节作为其唯一的参数. 构成部分参考员曝光 `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`, (中文(简体) ), `getMessages`,以及 `subscribe`。可堆肥添加 拥有 `mount`编号 :`unmount` 业务和反应 `widget`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`, (中文(简体) ), 财务报告和审定财务报表 `messages` 裁判员。 通过下列程序注册的国家听众 `subscribe` 为: 孤立: 如果丢出一个, 错误报告而不损坏请求 或者跳过剩下的听众。 答题后取消 在 `getMessages()` 与 `status: 'cancelled'`。 。 。 . `send()` 以状态结果解决,例如 `complete`, (中文(简体) ), `cancelled`, (中文(简体) ), `error`, (中文(简体) ), `busy`,或 `empty`。 。 。 . 当响应流时, 发送动作变为已启用 **停下来** 行动. 作曲者接受多行/ 编码- 粘贴输入: 输入发送和 Shift+ 输入 插入新行。 可复制已完成的答案和有栅栏的代码块 传输错误显示重试动作而不重复问题 . 内置和外部触发器都收到 `aria-controls`, (中文(简体) ), `aria-haspopup="dialog"`同步 `aria-expanded`; 属性为 外部触发器在未绑定时恢复。 居中对话框陷阱 焦点、 使外部内容惰性、 锁定页面滚动, 而非模式 转角和抛锚面板没有. 构成部分是安保部门安全. `useContext7Widget` 也可以在安全部门改革期间创建, 但必须 `mount()` 方法需要浏览器文档. ## 数据流动与隐私 浏览器会发布已配置的库 ID 和当前对话信件 直接转到 `https://context7.com/api/v2/widget/chat`源代码实验室没有 代理聊天内容 。 该套件没有添加分析、饼干或持久性 浏览器存储; 对话状态一直保存在挂载部件中直至 `reset()` 或卸载。 事件有效载荷暴露出对 主机应用程序,所以任何记录、分析或持久性都添加到 集成器数据流. 不发送机密或敏感个人资料,以及 审查背景7的后端处理和保留政策. ## 多个部件 包装 使用一个独特的 `widgetId` 用于每个独立控制的部件。 复制时 身份证是故意挂载的,最近挂载的个案得到解决 如果更新一个卸载,则前一个实例会再次激活. 软件包暴露了一个JavaScript条目, `@desource/context7-widget-vue`,包含组件,可堆肥,插件, 和大众类型。 样式在 `@desource/context7-widget-vue/styles.css`; 没有组件或可堆肥 JavaScript 子路径. 日内瓦 `@desource/context7-widget/kit` 保持外部状态 模块依赖性,允许耗用应用程序去除 Vue 和 树震未用工具包模块。 无害环境管理条目和申报为安全部门改革进口 用现代节点无害环境管理和TypeScript捆绑器分辨率进行安全验证. ## 相关软件包 - [`@desource/context7-widget`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/core) 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎. - [`@desource/context7-widget-nuxt`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/nuxt) 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值. - [`@desource/context7-widget-react`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/react) 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器. - [`@desource/context7-widget-svelte`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/svelte) 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器. - [`@desource/context7-widget-angular`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/angular) 提供独立的Angular组件,信号,应用程序默认,以及可注射控制. ## 常见问题 ### @desource/context7-widget-vue 是什么？ 本地 Vue 3 组件和可自定义的 Context7 文档聊天部件 \. ### 如何安装 @desource/context7-widget-vue？ 在项目目录运行 npm install @desource/context7-widget-vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @desource/context7-widget-vue 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @desource/context7-widget-vue 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @desource/context7-widget-vue 可以商用吗？ @desource/context7-widget-vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @desource/context7-widget-vue 的下载量有多少？ 根据 npm 官方下载统计，@desource/context7-widget-vue 在 2026/10/12 – 2026/11/10 这 30 天内被下载 17,097 次，日均约 570 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @desource/context7-widget-vue 还在维护吗？ 最新版本 0\.2\.3 发布于 2026/11/01（11 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。