fix(docs): [anchor] 优化锚点文档

opentiny · Nov 7, 2024 · 13bd69c · 13bd69c
1 parent eafb17c
commit 13bd69c
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 20 deletions.
diff --git a/examples/sites/demos/pc/app/anchor/change-composition-api.vue b/examples/sites/demos/pc/app/anchor/change-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 const links = ref([
   {
@@ -42,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  TinyModal.message({ message: `change${link}`, status: 'info' })
+  console.log(`当前锚点${link}`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/anchor/change.spec.ts b/examples/sites/demos/pc/app/anchor/change.spec.ts
@@ -7,11 +7,15 @@ test('change事件', async ({ page }) => {
   const anchor = page.locator('.tiny-anchor')
   const link1 = anchor.getByRole('link', { name: '演示' })
   const link2 = anchor.getByRole('link', { name: 'change 事件' })
-  const modal = page.locator('.tiny-modal')
 
+  const values = [] as string[]
+  page.on('console', async (msg) => {
+    for (const arg of msg.args()) {
+      values.push(await arg.jsonValue())
+    }
+  })
   await link1.click()
-  await expect(modal).toHaveCount(1)
   await link2.click()
-  await expect(modal).toHaveCount(2)
-  await expect(modal.last()).toHaveText(/#change/)
+  expect(values.length).toBe(2)
+  expect(values[0].startsWith('当前锚点#demonstrate')).toBeTruthy()
 })
diff --git a/examples/sites/demos/pc/app/anchor/change.vue b/examples/sites/demos/pc/app/anchor/change.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 export default {
   components: {
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      TinyModal.message({ message: `change${link}`, status: 'info' })
+      console.log(`当前锚点${link}`)
     }
   }
 }

diff --git a/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue b/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
@@ -67,25 +67,29 @@ function handleClick(e, link) {
 .scroll-container {
   height: 40vh;
   overflow: auto;
+  text-align: center;
+  font-size: 24px;
+}
+.scroll-container > div {
+  padding-top: 20%;
 }
 .sec-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.1);
+  background: #b6d4f2;
 }
 .sec-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.3);
+  background: #c2c2c2;
 }
 .sec-3 {
-  background: rgba(135, 206, 235, 0.6);
-  padding-top: 20vh;
+  background: #fff4e8;
 }
 .sec-3-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.8);
+  background: #b9e683;
 }
 .sec-3-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 1);
+  background: #f2c5c2;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/anchor/set-container.vue b/examples/sites/demos/pc/app/anchor/set-container.vue
@@ -78,25 +78,29 @@ export default {
 .scroll-container {
   height: 40vh;
   overflow: auto;
+  text-align: center;
+  font-size: 24px;
+}
+.scroll-container > div {
+  padding-top: 20%;
 }
 .sec-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.1);
+  background: #b6d4f2;
 }
 .sec-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.3);
+  background: #c2c2c2;
 }
 .sec-3 {
-  background: rgba(135, 206, 235, 0.6);
-  padding-top: 20vh;
+  background: #fff4e8;
 }
 .sec-3-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.8);
+  background: #b9e683;
 }
 .sec-3-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 1);
+  background: #f2c5c2;
 }
 </style>