utm-params-extractor/demo-utm-vue3/src/App.vue

<script setup>
import { ref, computed, onMounted } from 'vue'
// import UtmTracker from 'utm-params-extractor-test'
import '../../src/index'
const utm = ref(null)
let tracker = null


onMounted(async () => {
  tracker = new UtmTracker({
    reportUrl: 'http://1e86b0fd.r32.cpolar.top/admin/marketing/config/report',
    autoSend: false
  });
  utm.value = await tracker.getParamsAsync()
})

const utmJson = computed(() => utm.value ? JSON.stringify(utm.value, null, 2) : '正在获取...')

const sendUtm = () => {
  if (tracker) {
    tracker.send()
  } else {
    console.warn('UtmTracker 尚未初始化')
  }
}
</script>

<template>
  <div style="padding: 24px;">
    <h1>UTM Params Extractor Demo (Vue3)</h1>
    <p>本页面演示如何在 Vue3 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
    <button @click="sendUtm">发送</button>
    <h2>获取到的参数：</h2>
    <pre style="background: #f6f8fa; padding: 16px; border-radius: 8px; text-align: left;">
      {{ utmJson }}
    </pre>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>