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

example/src/demo/pc/anchor/basic-usage.vue

@@ -3,7 +3,7 @@
     <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="height: 100vh; background: rgba(0, 0, 125, 0.1)">
+      <div id="event" style="background: rgba(0, 0, 125, 0.1)">
         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>

example/src/demo/pc/anchor/set-container.vue

@@ -0,0 +1,74 @@
+<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)">
+          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>
+      </div>
+    </tiny-col>
+    <tiny-col :span="2">
+      <tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-content"></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: {
+    handleClick(e, link) {
+      e.preventDefault()
+      console.log('link', link)
+    }
+  }
+}
+</script>
+
+<style>
+.is-active-content {
+  border: 1px solid red;
+}
+</style>

example/src/docs/zh-CN/anchor/set-container.md

@@ -0,0 +1,23 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-business-anchor" />
+</p>
+
+## Anchor 锚点
+
+<nova-uxlink widget-name="Anchor"></nova-uxlink>
+
+用于跳转到页面指定位置
+
+</div>
+
+### 指定容器内滚动
+
+指定容器containerId后，可以通过阻止a标签的默认事件，实现单页面hash路由模式的页面跳转
+还可以通过maskClass属性设置自定义雷鸣，高亮显示滚到的目标元素
+
+<nova-demo-view link="anchor/set-container"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="anchor"></nova-attributes>

example/src/nav.config.comp.json

@@ -45,6 +45,10 @@
             {
               "path": "/anchor/basic-usage",
               "name": "基本用法"
+            },
+            {
+              "path": "/anchor/set-container",
+              "name": "滚动容器"
             }
           ]
         },

example/src/route.config.comp.js

@@ -121,6 +121,11 @@ const routers = [
     meta: { title: '导航组件-anchor 锚点-基本用法', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/basic-usage.md')
   },
+  {
+    path: 'anchor/set-container',
+    meta: { title: '导航组件-anchor 锚点-滚动容器', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/set-container.md')
+  },
   {
     path: 'breadcrumb',
     meta: { title: '导航组件-Breadcrumb 面包屑', lang: 'zh-CN', sign: 'component' },

packages/anchor/src/index.vue

@@ -8,8 +8,17 @@ export default {
     links: {
       type: Array,
       default: () => []
+    },
+    containerId: {
+      type: String,
+      default: ''
+    },
+    markClass: {
+      type: String,
+      default: ''
     }
   },
+  emits: ['linkClick'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   },