元年 C1-智答 组件库使用流程

简介

• 该组件库适仅适用于元年 C1-智答项目。
• 该组件库是基于 vue 平台进行搭建，目前只适用于 vue 项目。

通过 npm/cnpm 下载最新组件库（推荐使用 cnpm）

命令如下：

cnpm install yn-zhida

通过 npm/cnpm 下载指定版本组件库

命令如下：

cnpm install [email protected]

使用方法

• 1、只需在具体地方使用时，引入具体组件。方法如下：

...
import AI from "yn-zhida/libs/pages/Ai"; // AI 是智答问答的主要组件
import ExternalSite from "yn-zhida/libs/pages/ExternalSite"; // ExternalSite 是智答打开iframe组件
...

• 2、注册组件

...
components: { AI, ExternalSite }
...

• 3、在项目工程的 store/index.js 内，注入 yn-zhida 的 vuex 配置。方法如下

...
import zhida from "yn-zhida/libs/store/applications/zhida/";

modules: { zhida },
...

如果是 ts 项目，引入 zhida 前面加上 // @ts-ignore

...
// @ts-ignore
import zhida from "yn-zhida/libs/store/applications/zhida/";

modules: { zhida },
...

-4、包裹 AI 组件的容器需要加一个背景色 openSite 事件提供给使用 AI 组件的时候如果需要打开简报地址使用的

...
<div style="background-color: #f2f5f8;">
  <AI @openSite="data => console.log(data)"/>
</div>

<ExternalSite :iframeUrl="'www.yuanian.com'" @closeSite="closeSite" />
...

-5、如果没有定制化需求，只是引用智答本身项目，则向 AI 组件通过 provide 传递一个 ifFromOtherProject: true 的属性;还需要传递 userIdForZhidaInNPM 作为的 userId

...
provide() {
  return {
    ifFromOtherProject: true,
    userIdForZhidaInNPM: "admin"
  };
},
...

其他组件库使用功能

如有相关问题，请联系@钱格