瀏覽代碼

fix: 添加vue版本示例vue3

jcq 1 月之前
父節點
當前提交
036698be05
共有 1 個文件被更改,包括 16 次插入9 次删除
  1. 16 9
      demo-utm-vue3/src/App.vue

+ 16 - 9
demo-utm-vue3/src/App.vue

@@ -1,17 +1,24 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { ref, computed, onMounted } from 'vue'
+import UtmTracker from 'utm-params-extractor-test'
+
+const utm = ref(null)
+const utmJson = computed(() => utm.value ? JSON.stringify(utm.value, null, 2) : '正在获取...')
+
+onMounted(() => {
+  utm.value = UtmTracker.get()
+})
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div style="padding: 24px;">
+    <h1>UTM Params Extractor Demo (Vue3)</h1>
+    <p>本页面演示如何在 Vue3 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
+    <h2>获取到的参数:</h2>
+    <pre style="background: #f6f8fa; padding: 16px; border-radius: 8px;">
+      {{ utmJson }}
+    </pre>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>