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

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

@@ -0,0 +1,60 @@
+<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="height: 100vh; 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>
+    </tiny-col>
+    <tiny-col :span="2">
+      <tiny-anchor :links="links"></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'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>

example/src/docs/zh-CN/anchor/basic-usage.md

@@ -0,0 +1,20 @@
+<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/basic-usage"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="anchor"></nova-attributes>

example/src/nav.config.comp.json

@@ -38,6 +38,16 @@
     {
       "name": "导航组件",
       "children": [
+        {
+          "path": "/anchor",
+          "name": "anchor 锚点",
+          "children": [
+            {
+              "path": "/anchor/basic-usage",
+              "name": "基本用法"
+            }
+          ]
+        },
         {
           "path": "/breadcrumb",
           "name": "Breadcrumb 面包屑",

example/src/route.config.comp.js

@@ -111,6 +111,16 @@ const routers = [
     meta: { title: '其他组件-Crop 图片裁剪-事件', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-crop' */ './docs/zh-CN/crop/crop-events.md')
   },
+  {
+    path: 'anchor',
+    meta: { title: '导航组件-anchor 锚点', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/basic-usage.md')
+  },
+  {
+    path: 'anchor/basic-usage',
+    meta: { title: '导航组件-anchor 锚点-基本用法', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/basic-usage.md')
+  },
   {
     path: 'breadcrumb',
     meta: { title: '导航组件-Breadcrumb 面包屑', lang: 'zh-CN', sign: 'component' },

modules.json

@@ -25,6 +25,11 @@
     "type": "component",
     "exclude": false
   },
+  "Anchor": {
+    "path": "packages/anchor/index.js",
+    "type": "component",
+    "exclude": false
+  },
   "Area": {
     "path": "packages/area/index.js",
     "type": "component",

packages/anchor/index.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Anchor from './src/index'
+import '@opentiny/vue-theme/anchor/index.css'
+
+/* istanbul ignore next */
+Anchor.install = function (Vue) {
+  Vue.component(Anchor.name, Anchor)
+}
+
+Anchor.version = process.env.COMPONENT_VERSION
+
+/* istanbul ignore next */
+if (process.env.BUILD_TARGET === 'runtime') {
+  if (typeof window !== 'undefined' && window.Vue) {
+    Anchor.install(window.Vue)
+  }
+}
+
+export default Anchor

packages/anchor/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@opentiny/vue-anchor",
+    "version": "0.1.0",
+    "description": "",
+    "main": "lib/index.js",
+    "scripts": {
+      "lint": "eslint src/**/*{.js,.html,.vue} --quiet",
+      "build:ui2": "cross-env BUILD_TARGET=single NODE_ENV=production node ../../build/build-ui.js",
+      "build:ui3": "cross-env BUILD_TARGET=single NODE_ENV=production node ../../example/build/build-ui.js"
+    },
+    "dependencies": {
+      "@opentiny/vue-renderless": "~0.1.0",
+      "@opentiny/vue-common": "~0.1.0"
+    },
+    "license": "MIT"
+  }
+  

packages/anchor/src/index.vue

@@ -0,0 +1,54 @@
+<script lang="jsx">
+import { setup, $prefix } from '@opentiny/vue-common'
+import { renderless, api } from '@opentiny/vue-renderless/anchor/vue'
+
+export default {
+  name: $prefix + 'Anchor',
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props, context) {
+    return setup({ props, context, renderless, api })
+  },
+  render() {
+    const {
+      links,
+      linkClick,
+      state: { currentLink }
+    } = this
+    const anchorClass = 'tiny-anchor'
+
+    const renderLinks = (links) =>
+      Array.isArray(links)
+        ? links.map((item) => (
+            <div class={`${anchorClass}-link`} key={item.key}>
+              <a
+                href={item.link}
+                class={[`${anchorClass}-link-title`, currentLink === item.link && `${anchorClass}-link-title--active`]}
+                title={item.title}
+                onClick={(e) => linkClick(e, item)}
+              >
+                {item.title}
+              </a>
+              {item.children ? renderLinks(item.children) : null}
+            </div>
+          ))
+        : null
+
+    return (
+      <div class={`${anchorClass}__wrapper`}>
+        <div class={anchorClass} ref="anchorRef">
+          <div class={`${anchorClass}-link-mask`} ref="maskRef"></div>
+          <div class={`${anchorClass}-orbit`}>
+            <div class={`${anchorClass}-orbit-skid`} ref="skidRef"></div>
+          </div>
+          {links && renderLinks(links)}
+        </div>
+      </div>
+    )
+  }
+}
+</script>