feat(docs): 实时体验页面, url 回显功能 (#122)

Tencent · Sep 2, 2022 · 9a4f04c · 9a4f04c
1 parent 375da6c
commit 9a4f04c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/docs/wujie/components/wujie-connect.vue b/docs/wujie/components/wujie-connect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 const emit = defineEmits(["changeUrl"]);
 const url = ref("");
 const flag = ref(false);
@@ -8,10 +8,18 @@ function preventDefault(event) {
   const reg = /(https):\/\/([\w.]+\/?)\S*/;
   if (reg.test(url.value)) {
     flag.value = !flag.value;
-    console.log(flag.value);
     emit("changeUrl", [url.value, flag.value]);
   }
 }
+const props = defineProps<{
+  baseUrl?: string;
+}>();
+watch(
+  () => props.baseUrl,
+  (newValue) => {
+    url.value = newValue;
+  }
+);
 </script>
 <template>
   <section id="newsletter" class="NewsLetter">

diff --git a/docs/wujie/components/wujie-online.vue b/docs/wujie/components/wujie-online.vue
@@ -1,20 +1,19 @@
-<script setup>
+<script setup lang="ts">
 import { watch, ref, computed } from "vue";
 import { wujieList } from "./data";
 
-const props = defineProps({
-  url: String | Object,
-  flag: Boolean
-});
-
-const wujieUrl = ref("");
+const emit = defineEmits<{
+  (e: "update:url", value: string): void;
+}>();
+const props = withDefaults(
+  defineProps<{
+    url?: string;
+    flag?: boolean;
+  }>(),
+  {}
+);
+const wujieUrl = ref<string>("");
 
-const isScroll = computed(() => {
-  return wujieUrl.value !== "" ? "scroll" : "hidden";
-});
-const isBorder = computed(() => {
-  return wujieUrl.value !== "" ? "none" : "3px solid var(--vp-c-text-2)";
-});
 watch(
   () => props.flag,
   (newValue) => {
@@ -24,6 +23,7 @@ watch(
 
 function changeWujieUrl(item) {
   wujieUrl.value = item.url;
+  emit('update:url', item.url)
 }
 </script>
 

diff --git a/docs/wujie/index.md b/docs/wujie/index.md
@@ -15,6 +15,6 @@ function changeUrl(value) {
 </script>
 
 <ClientOnly>
-    <WujieConnect @changeUrl="changeUrl" />
-    <WujieOnline :url="url" :flag=flag />
+    <WujieConnect @changeUrl="changeUrl" :baseUrl="url" />
+    <WujieOnline v-model:url="url" :flag=flag />
 </ClientOnly>