From 28cc92d570750f66540ce8eb1aad691f41fb6c03 Mon Sep 17 00:00:00 2001
From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Date: Fri, 3 Mar 2023 17:35:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(anchor):=20=E6=B7=BB=E5=8A=A0=E9=94=9A?=
 =?UTF-8?q?=E7=82=B9anchor=E7=BB=84=E4=BB=B6onchange=E4=BA=8B=E4=BB=B6=20(?=
 =?UTF-8?q?#35)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(anchor): 新增anchor组件第一个功能：基本使用

* feat(anchor): 修改anchor组件讨论意见，增加container api和maskClass类名

* fix(anchor): 修复anchor组件MD文档说明

* feat(anchor): 添加锚点anchor组件onchange事件

* fix(anchor): 修复review意见，取消行内样式
---
 example/src/demo/pc/anchor/basic-usage.vue   | 32 +++++--
 example/src/demo/pc/anchor/on-change.vue     | 87 ++++++++++++++++++++
 example/src/demo/pc/anchor/set-container.vue | 42 ++++++++--
 example/src/docs/zh-CN/anchor/on-change.md   | 22 +++++
 example/src/nav.config.comp.json             |  4 +
 example/src/route.config.comp.js             |  5 ++
 packages/anchor/src/index.vue                |  2 +-
 7 files changed, 179 insertions(+), 15 deletions(-)
 create mode 100644 example/src/demo/pc/anchor/on-change.vue
 create mode 100644 example/src/docs/zh-CN/anchor/on-change.md

diff --git a/example/src/demo/pc/anchor/basic-usage.vue b/example/src/demo/pc/anchor/basic-usage.vue
index 9dc15dd2e..739e2df4e 100644
--- a/example/src/demo/pc/anchor/basic-usage.vue
+++ b/example/src/demo/pc/anchor/basic-usage.vue
@@ -1,12 +1,12 @@
 <template>
   <tiny-row>
     <tiny-col :span="10">
-      <div id="basic-usage" style="height: 100vh; background: rgba(125, 0, 0, 0.1)">Basic Usage</div>
-      <div id="set-container" style="height: 100vh; background: rgba(0, 125, 0, 0.1)">Set Container</div>
-      <div id="event" style="background: rgba(0, 0, 125, 0.1)">
+      <div id="basic-usage" class="basic-usage">Basic Usage</div>
+      <div id="set-container" class="set-container">Set Container</div>
+      <div id="event" class="event">
         Event
-        <div id="on-change" style="height: 100vh; background: rgba(0, 0, 125, 0.2)">On Change</div>
-        <div id="link-click" style="height: 100vh; background: rgba(0, 0, 125, 0.3)">Link Click</div>
+        <div id="on-change" class="on-change">On Change</div>
+        <div id="link-click" class="link-click">Link Click</div>
       </div>
     </tiny-col>
     <tiny-col :span="2">
@@ -58,3 +58,25 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.basic-usage {
+  height: 100vh;
+  background: rgba(125, 0, 0, 0.1);
+}
+.set-container {
+  height: 100vh;
+  background: rgba(0, 125, 0, 0.1);
+}
+.event {
+  background: rgba(0, 0, 125, 0.1);
+}
+.on-change {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.2);
+}
+.link-click {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.3);
+}
+</style>
diff --git a/example/src/demo/pc/anchor/on-change.vue b/example/src/demo/pc/anchor/on-change.vue
new file mode 100644
index 000000000..0f13172f6
--- /dev/null
+++ b/example/src/demo/pc/anchor/on-change.vue
@@ -0,0 +1,87 @@
+<template>
+  <tiny-row>
+    <tiny-col :span="10">
+      <div id="basic-usage" class="basic-usage">Basic Usage</div>
+      <div id="set-container" class="set-container">Set Container</div>
+      <div id="event" class="event">
+        Event
+        <div id="on-change" class="on-change">On Change</div>
+        <div id="link-click" class="link-click">Link Click</div>
+      </div>
+    </tiny-col>
+    <tiny-col :span="2">
+      <tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
+    </tiny-col>
+  </tiny-row>
+</template>
+
+<script>
+import { Anchor, Row, Col } from '@opentiny/vue'
+export default {
+  components: {
+    TinyAnchor: Anchor,
+    TinyRow: Row,
+    TinyCol: Col
+  },
+  data() {
+    return {
+      links: [
+        {
+          key: 'basic-usage',
+          link: '#basic-usage',
+          title: 'Basic Usage'
+        },
+        {
+          key: 'set-container',
+          link: '#set-container',
+          title: 'Set Container'
+        },
+        {
+          key: 'event',
+          link: '#event',
+          title: 'Event',
+          children: [
+            {
+              key: 'on-change',
+              link: '#on-change',
+              title: 'On Change'
+            },
+            {
+              key: 'link-click',
+              link: '#link-click',
+              title: 'Link Click'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handleChange(link) {
+      console.log('change', link)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.basic-usage {
+  height: 100vh;
+  background: rgba(125, 0, 0, 0.1);
+}
+.set-container {
+  height: 100vh;
+  background: rgba(0, 125, 0, 0.1);
+}
+.event {
+  background: rgba(0, 0, 125, 0.1);
+}
+.on-change {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.2);
+}
+.link-click {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.3);
+}
+</style>
diff --git a/example/src/demo/pc/anchor/set-container.vue b/example/src/demo/pc/anchor/set-container.vue
index e0a50f03f..caa0a4297 100644
--- a/example/src/demo/pc/anchor/set-container.vue
+++ b/example/src/demo/pc/anchor/set-container.vue
@@ -1,18 +1,18 @@
 <template>
   <tiny-row>
     <tiny-col :span="10">
-      <div id="container" style="height: 30vh; border: 2px solid #333; overflow: auto">
-        <div id="basic-usage" style="height: 100vh; background: rgba(125, 0, 0, 0.1)">Basic Usage</div>
-        <div id="set-container" style="height: 100vh; background: rgba(0, 125, 0, 0.1)">Set Container</div>
-        <div id="event" style="background: rgba(0, 0, 125, 0.1)">
+      <div id="container" class="scroll-container">
+        <div id="basic-usage" class="basic-usage">Basic Usage</div>
+        <div id="set-container" class="set-container">Set Container</div>
+        <div id="event" class="event">
           Event
-          <div id="on-change" style="height: 100vh; background: rgba(0, 0, 125, 0.2)">On Change</div>
-          <div id="link-click" style="height: 100vh; background: rgba(0, 0, 125, 0.3)">Link Click</div>
+          <div id="on-change" class="on-change">On Change</div>
+          <div id="link-click" class="link-click">Link Click</div>
         </div>
       </div>
     </tiny-col>
     <tiny-col :span="2">
-      <tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-content"></tiny-anchor>
+      <tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-anchor"></tiny-anchor>
     </tiny-col>
   </tiny-row>
 </template>
@@ -67,8 +67,32 @@ export default {
 }
 </script>
 
-<style>
-.is-active-content {
+<style scoped>
+.is-active-anchor {
   border: 1px solid red;
 }
+.scroll-container {
+  height: 30vh;
+  border: 2px solid #333;
+  overflow: hidden;
+}
+.basic-usage {
+  height: 100vh;
+  background: rgba(125, 0, 0, 0.1);
+}
+.set-container {
+  height: 100vh;
+  background: rgba(0, 125, 0, 0.1);
+}
+.event {
+  background: rgba(0, 0, 125, 0.1);
+}
+.on-change {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.2);
+}
+.link-click {
+  height: 100vh;
+  background: rgba(0, 0, 125, 0.3);
+}
 </style>
diff --git a/example/src/docs/zh-CN/anchor/on-change.md b/example/src/docs/zh-CN/anchor/on-change.md
new file mode 100644
index 000000000..3b281b606
--- /dev/null
+++ b/example/src/docs/zh-CN/anchor/on-change.md
@@ -0,0 +1,22 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-business-anchor" />
+</p>
+
+## Anchor 锚点
+
+<nova-uxlink widget-name="Anchor"></nova-uxlink>
+
+用于跳转到页面指定位置
+
+</div>
+
+### 监听锚点改变事件
+
+锚点链接改变时触发
+
+<nova-demo-view link="anchor/on-change"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="anchor"></nova-attributes>
diff --git a/example/src/nav.config.comp.json b/example/src/nav.config.comp.json
index 0f6220609..c764c97e5 100644
--- a/example/src/nav.config.comp.json
+++ b/example/src/nav.config.comp.json
@@ -49,6 +49,10 @@
             {
               "path": "/anchor/set-container",
               "name": "滚动容器"
+            },
+            {
+              "path": "/anchor/on-change",
+              "name": "onChange事件"
             }
           ]
         },
diff --git a/example/src/route.config.comp.js b/example/src/route.config.comp.js
index 5d9ed8a6e..b2f73c75f 100644
--- a/example/src/route.config.comp.js
+++ b/example/src/route.config.comp.js
@@ -126,6 +126,11 @@ const routers = [
     meta: { title: '导航组件-anchor 锚点-滚动容器', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/set-container.md')
   },
+  {
+    path: 'anchor/on-change',
+    meta: { title: '导航组件-anchor 锚点-onChange事件', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/on-change.md')
+  },
   {
     path: 'breadcrumb',
     meta: { title: '导航组件-Breadcrumb 面包屑', lang: 'zh-CN', sign: 'component' },
diff --git a/packages/anchor/src/index.vue b/packages/anchor/src/index.vue
index 14e0a445b..bd2850f99 100644
--- a/packages/anchor/src/index.vue
+++ b/packages/anchor/src/index.vue
@@ -18,7 +18,7 @@ export default {
       default: ''
     }
   },
-  emits: ['linkClick'],
+  emits: ['linkClick', 'onChange'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   },