Vue3 组件说明（jc-utils）

组件清单

当前 packages/vue3 对外导出的核心组件如下：

• ApplyDataDialog
• GlobalModal
• JcSearch
• JcMSearch
• JcVerifySlide
• JcCarrierSearch
• AirCarrierSearch
• SeaCarrierSearch
• AirLineSearch
• SeaLineSearch
• LineCascader
• ChineseCompanySearch
• JcLoginDialog
• CodeInput
• GoogleInput
• JcFloatInput
• JcFloatWrapper

快速使用

import { createApp } from "vue";
import App from "./App.vue";
import JCtransComps from "@jctrans-materials/comps-vue3";
import "@jctrans-materials/comps-vue3/index.css";

const app = createApp(App);
app.use(JCtransComps);
app.mount("#app");

组件能力速览

搜索类

• JcSearch：通用地点搜索（国家/城市/港口/机场）
• JcMSearch：移动端/轻量交互搜索
• JcCarrierSearch 及 Air/Sea Carrier/Line：承运人与航线搜索
• LineCascader：航线-国家级联选择
• ChineseCompanySearch：中国公司名称联想搜索

验证与登录类

• JcVerifySlide：滑块验证码
• JcLoginDialog：登录/注册弹窗
• CodeInput / GoogleInput：验证码输入

输入与弹窗基础类

• JcFloatInput / JcFloatWrapper：浮动标签输入容器
• ApplyDataDialog：补充数据申请
• GlobalModal：全局弹窗容器

重点事件补充

JcCarrierSearch 现已透出输入框事件：

• focus
• blur
• remove-tag

便于在业务侧跟踪输入焦点、标签移除行为。

Playground 示例

可在以下页面查看 Vue3 组件演示：

• playground/v3play/src/App.vue
  • Base Demo：JcSearch + ApplyDataDialog
  • Carrier/Line Demo：JcCarrierSearch + LineCascader
  • MSearch Demo：JcMSearch
  • Login Dialog Demo：JcLoginDialog
  • Company Search Demo：ChineseCompanySearch
  • Verify Slide Demo：JcVerifySlide

JcSearch 的详细参数说明可参考：

• packages/vue3/src/components/JcSearch/README.md

GIO 埋点接入（Vue3）

1) 按需启用（不传配置即不启用）

import { createApp } from "vue";
import App from "./App.vue";
import JCtransComps from "@jctrans-materials/comps-vue3";

const app = createApp(App);

app.use(JCtransComps, {
  tracking: {
    enabled: true,
    autoInit: true,
    directiveName: "gio-track",
    accountId: import.meta.env.VITE_GIO_ACCOUNT_ID,
    dataSourceId: import.meta.env.VITE_GIO_DATA_SOURCE_ID,
    appId: import.meta.env.VITE_GIO_APP_ID,
    initOptions: {
      debug: import.meta.env.DEV,
      trackPage: false,
      serverUrl: import.meta.env.VITE_GIO_SERVER_URL,
    },
  },
});

如果不传 tracking，则不会初始化 GIO。

2) 指令与 API 用法

<button v-gio-track="'order_submit'">提交订单</button>

<button
  v-gio-track="{
    event: 'order_submit',
    attrs: { source: 'cart' },
    onTracked: ({ eventName }) => console.log(eventName),
  }"
>
  提交并回调
</button>

const vm = getCurrentInstance()?.proxy;
vm?.$trackEvent("manual_track", { source: "manual" });
vm?.$gio.track("direct_track", { source: "direct" }, () => {
  console.log("done");
});

3) 配置优先级

1. window.__JCTRANS_GIO_CONFIG__（或 globalVarName 指定对象）
2. tracking 传入配置
3. import.meta.env.VITE_GIO_*

4) GIO 单测（Vue3）

测试文件：src/gio.test.ts

覆盖点：

• 初始化分支：
  • 有 appId（4 参数 init）
  • 无 appId（3 参数 init）
  • 缺少必填配置时不初始化
• 指令行为：mounted / updated / beforeUnmount 的绑定、重绑、清理
• 回调行为：onTracked 在 track 回调后触发
• 暴露能力：$trackEvent 与 $gio 常用 API

结合 GrowingIO WebJS 常用 API 文档（含 trackTimerStart）对齐了以下接口可用性：

• setUserId
• clearUserId
• setVisitor
• trackTimerStart
• trackTimerEnd

运行方式：

pnpm -C packages/vue3 test:run