Vue2 组件说明（jc-utils）

组件清单

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

• ApplyDataDialog
• GlobalModal
• JcSearch
• JcVerifySlide
• JcCarrierSearch
• AirCarrierSearch
• SeaCarrierSearch
• AirLineSearch
• SeaLineSearch

快速使用

import Vue from "vue";
import JCtransComps from "@jctrans-materials/comps-vue2";
import "@jctrans-materials/comps-vue2/style.css";

Vue.use(JCtransComps);

如果你在 Vue 2.6 环境下使用，请额外安装并注册 @vue/composition-api；Vue 2.7 及以上版本不需要这一步。

组件能力速览

1) JcSearch

• 用途：国家/城市/港口/机场等通用地点搜索
• 常用 Props：value / modelValue、multiple、searchTypeList、historyKey
• 常用事件：select、change、input、update:modelValue

2) JcVerifySlide

• 用途：滑块验证码验证
• 常用 Props：visible、lang、mode、imgSize、barSize
• 常用事件：success、update:visible

3) JcCarrierSearch 及包装组件

• 用途：承运人/航线搜索（海运、空运）
• 常用 Props：value / modelValue、type、lineType、multiple、showApplyData
• 常用事件：
  • 业务：change、apply
  • 输入框：focus、blur、remove-tag

包装组件：

• AirCarrierSearch（航空公司）
• SeaCarrierSearch（船公司）
• AirLineSearch（空运航线）
• SeaLineSearch（海运航线）

4) ApplyDataDialog

• 用途：申请补充数据弹窗
• 常用 Props：value
• 常用事件：confirm、input / update:value

5) GlobalModal

• 用途：全局业务弹窗容器（配合插件/事件总线）

Playground 示例

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

• playground/v2play/src/App.vue
  • Base Demo：JcSearch + ApplyDataDialog + GlobalModal
  • Carrier Search Demo：JcCarrierSearch 系列
  • Verify Slide Demo：JcVerifySlide

GIO 埋点接入（Vue2）

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

import Vue from "vue";
import JCtransComps from "@jctrans-materials/comps-vue2";

Vue.use(JCtransComps, {
  tracking: {
    enabled: true,
    autoInit: true,
    directiveName: "gio-track",
    accountId: process.env.VUE_APP_GIO_ACCOUNT_ID,
    dataSourceId: process.env.VUE_APP_GIO_DATA_SOURCE_ID,
    appId: process.env.VUE_APP_GIO_APP_ID,
    initOptions: {
      debug: process.env.NODE_ENV !== "production",
      trackPage: false,
      serverUrl: process.env.VUE_APP_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>

this.$trackEvent("manual_track", { source: "manual" });
this.$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 单测（Vue2）

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

覆盖点：

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

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

• setUserId
• clearUserId
• setVisitor
• trackTimerStart
• trackTimerEnd

运行方式：

pnpm -C packages/vue2 test:run