feat(Anchor): add customScroll API to support custom scroll behavior (#…

…4386) * feat(anchor-item): 新增API(disableScroll)，支持禁用滚动控制 * feat(anchor-item): 新增api customScroll 支持用户使用自定义的锚点滚动效果 * feat(anchor): 新增demo自定义滚动效果 * chore: update common * chore: update snapshot * chore: fix lint --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Uyarn <[email protected]>
Tencent · Nov 19, 2024 · f664d88 · f664d88
1 parent 982e8e9
commit f664d88
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 2 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/anchor/_example-ts/custom-scroll.vue b/src/anchor/_example-ts/custom-scroll.vue
@@ -0,0 +1,19 @@
+<template>
+  <div :id="`${path}#custom-scroll`">
+    <t-anchor>
+      <t-anchor-item href="#基础锚点" title="基础锚点" custom-scroll />
+      <t-anchor-item href="#多级锚点" title="多级锚点" custom-scroll />
+      <t-anchor-item href="#指定容器锚点" title="指定容器锚点" custom-scroll />
+      <t-anchor-item href="#特定交互锚点" title="特定交互锚点" custom-scroll />
+      <t-anchor-item href="#不同尺寸的锚点" title="不同尺寸的锚点" custom-scroll />
+      <t-anchor-item href="#自定义滚动效果" title="自定义滚动效果" custom-scroll />
+    </t-anchor>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { computed, getCurrentInstance } from 'vue';
+import get from 'lodash/get';
+
+const { appContext } = getCurrentInstance() || {};
+const path = computed(() => get(appContext, '$route.path', ''));
+</script>
diff --git a/src/anchor/_example/custom-scroll.vue b/src/anchor/_example/custom-scroll.vue
@@ -0,0 +1,19 @@
+<template>
+  <div :id="`${path}#custom-scroll`">
+    <t-anchor>
+      <t-anchor-item href="#基础锚点" title="基础锚点" custom-scroll />
+      <t-anchor-item href="#多级锚点" title="多级锚点" custom-scroll />
+      <t-anchor-item href="#指定容器锚点" title="指定容器锚点" custom-scroll />
+      <t-anchor-item href="#特定交互锚点" title="特定交互锚点" custom-scroll />
+      <t-anchor-item href="#不同尺寸的锚点" title="不同尺寸的锚点" custom-scroll />
+      <t-anchor-item href="#自定义滚动效果" title="自定义滚动效果" custom-scroll />
+    </t-anchor>
+  </div>
+</template>
+<script setup>
+import { computed, getCurrentInstance } from 'vue';
+import get from 'lodash/get';
+
+const { appContext } = getCurrentInstance() || {};
+const path = computed(() => get(appContext, '$route.path', ''));
+</script>
diff --git a/src/anchor/anchor-item-props.ts b/src/anchor/anchor-item-props.ts
@@ -28,4 +28,9 @@ export default {
     type: [String, Function] as PropType<TdAnchorItemProps['title']>,
     default: '',
   },
+  /** 自定义滚动效果，为true时点击锚点链接后不会使用js动画平滑滚动到锚点目标元素 */
+  customScroll: {
+    type: Boolean,
+    default: false,
+  },
 };
diff --git a/src/anchor/anchor-item.tsx b/src/anchor/anchor-item.tsx
@@ -37,7 +37,7 @@ export default defineComponent({
     };
     const handleClick = (e: MouseEvent) => {
       const { href, title } = props;
-      anchor.handleScrollTo(href);
+      if (!props.customScroll) anchor.handleScrollTo(href);
       anchor.handleLinkClick({ href, title: isString(title) ? title : undefined, e });
     };
     const renderTitle = () => {

diff --git a/src/anchor/anchor.en-US.md b/src/anchor/anchor.en-US.md
@@ -29,6 +29,7 @@ name | type | default | description | required
 href | String | - | required | Y
 target | String | _self | options：_self/_blank/_parent/_top | N
 title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+customScroll | Boolean | false | Custom scroll effect: When set to true, clicking on an anchor link will not use JavaScript animation to smoothly scroll to the anchor target element.
 
 ### AnchorTarget Props
 

diff --git a/src/anchor/anchor.md b/src/anchor/anchor.md
@@ -28,6 +28,7 @@ click | `(link: { href: string; title: string; e: MouseEvent })` | 锚点被点
 href | String | - | 必需。锚点链接, 如果是 hash 模式需要加上当前 path | Y
 target | String | _self | 锚点文本。可选项：_self/_blank/_parent/_top | N
 title | String / Slot / Function | '' | 锚点文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+customScroll | Boolean | false | 自定义滚动效果，为true时点击锚点链接后不会使用js动画平滑滚动到锚点目标元素
 
 ### AnchorTarget Props
 

diff --git a/src/anchor/type.ts b/src/anchor/type.ts
@@ -76,4 +76,9 @@ export interface TdAnchorItemProps {
    * @default ''
    */
   title?: string | TNode;
+  /**
+   * 自定义滚动效果，为true时点击锚点链接后不会使用js动画平滑滚动到锚点目标元素
+   * @default false
+   */
+  customScroll?: boolean;
 }
diff --git a/src/date-picker/hooks/useTableData.tsx b/src/date-picker/hooks/useTableData.tsx
@@ -38,5 +38,7 @@ export default function useTableData(props: any) {
     hoverEnd: props.hoverEnd,
     type: props.mode,
     isRange: props.isRange,
+    value: props.value,
+    multiple: props.multiple,
   });
 }
diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap
@@ -1399,6 +1399,108 @@ exports[`csr snapshot test > csr test ./src/anchor/_example/cursor.vue 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/anchor/_example/custom-scroll.vue 1`] = `
+<div
+  id="#custom-scroll"
+>
+  <div
+    class="t-anchor t-size-m"
+  >
+    <div
+      class="t-anchor__line"
+    >
+      <div
+        class="t-anchor__line-cursor-wrapper"
+      >
+        <div
+          class="t-anchor__line-cursor"
+        />
+      </div>
+    </div>
+
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#基础锚点"
+        target="_self"
+        title="基础锚点"
+      >
+        基础锚点
+      </a>
+      <!---->
+    </div>
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#多级锚点"
+        target="_self"
+        title="多级锚点"
+      >
+        多级锚点
+      </a>
+      <!---->
+    </div>
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#指定容器锚点"
+        target="_self"
+        title="指定容器锚点"
+      >
+        指定容器锚点
+      </a>
+      <!---->
+    </div>
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#特定交互锚点"
+        target="_self"
+        title="特定交互锚点"
+      >
+        特定交互锚点
+      </a>
+      <!---->
+    </div>
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#不同尺寸的锚点"
+        target="_self"
+        title="不同尺寸的锚点"
+      >
+        不同尺寸的锚点
+      </a>
+      <!---->
+    </div>
+    <div
+      class="t-anchor__item"
+    >
+      <a
+        class="t-anchor__item-link"
+        href="#自定义滚动效果"
+        target="_self"
+        title="自定义滚动效果"
+      >
+        自定义滚动效果
+      </a>
+      <!---->
+    </div>
+
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/anchor/_example/large.vue 1`] = `
 <div
   class="t-space t-space-horizontal anchor-demo"

diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap
@@ -22,6 +22,8 @@ exports[`ssr snapshot test > ssr test ./src/anchor/_example/container.vue 1`] =
 
 exports[`ssr snapshot test > ssr test ./src/anchor/_example/cursor.vue 1`] = `"<div class=\\"t-space t-space-horizontal anchor-demo\\" style=\\"gap:16px;\\" data-v-0c89850e><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-anchor t-size-m\\" data-v-0c89850e><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"\\"><!--[--><div class=\\"test-cursor\\" data-v-0c89850e></div><!--]--></div></div><!--[--><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##default\\" title=\\"定义\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">定义</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##multiple\\" title=\\"服务功能\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">服务功能</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##small\\" title=\\"使用指南\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">使用指南</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##large\\" title=\\"创建签名\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建签名</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##container\\" title=\\"创建内容\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建内容</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##anchor-target-6\\" title=\\"保密协议\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">保密协议</a><!----></div><div class=\\"t-anchor__item\\" data-v-0c89850e><a href=\\"##anchor-target-7\\" title=\\"其他\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">其他</a><!----></div><!--]--></div></div><!----><!--]--><!--]--></div>"`;
 
+exports[`ssr snapshot test > ssr test ./src/anchor/_example/custom-scroll.vue 1`] = `"<div id=\\"#custom-scroll\\"><div class=\\"t-anchor t-size-m\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><!--[--><div class=\\"t-anchor__item\\"><a href=\\"#基础锚点\\" title=\\"基础锚点\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">基础锚点</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"#多级锚点\\" title=\\"多级锚点\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">多级锚点</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"#指定容器锚点\\" title=\\"指定容器锚点\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">指定容器锚点</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"#特定交互锚点\\" title=\\"特定交互锚点\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">特定交互锚点</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"#不同尺寸的锚点\\" title=\\"不同尺寸的锚点\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">不同尺寸的锚点</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"#自定义滚动效果\\" title=\\"自定义滚动效果\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">自定义滚动效果</a><!----></div><!--]--></div></div>"`;
+
 exports[`ssr snapshot test > ssr test ./src/anchor/_example/large.vue 1`] = `"<div class=\\"t-space t-space-horizontal anchor-demo\\" style=\\"gap:16px;\\" id=\\"#large\\" data-v-4dca4868><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-anchor t-size-l\\" data-v-4dca4868><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><!--[--><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##default\\" title=\\"定义\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">定义</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##multiple\\" title=\\"服务功能\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">服务功能</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##small\\" title=\\"使用指南\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">使用指南</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##large\\" title=\\"创建签名\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建签名</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##container\\" title=\\"创建内容\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建内容</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##anchor-target-6\\" title=\\"保密协议\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">保密协议</a><!----></div><div class=\\"t-anchor__item\\" data-v-4dca4868><a href=\\"##anchor-target-7\\" title=\\"其他\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">其他</a><!----></div><!--]--></div></div><!----><!--]--><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/anchor/_example/multiple.vue 1`] = `"<div class=\\"t-space t-space-horizontal anchor-demo\\" style=\\"gap:16px;\\" id=\\"#multiple\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-anchor t-size-m\\"><div class=\\"t-anchor__line\\"><div class=\\"t-anchor__line-cursor-wrapper\\" style=\\"\\"><div class=\\"t-anchor__line-cursor\\"></div></div></div><!--[--><div class=\\"t-anchor__item\\"><a href=\\"##default\\" title=\\"定义\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">定义</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"##multiple\\" title=\\"服务功能\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">服务功能</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"##small\\" title=\\"使用指南\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">使用指南</a><!--[--><div class=\\"t-anchor__item\\"><a href=\\"##large\\" title=\\"创建签名\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建签名</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"##container\\" title=\\"创建内容\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">创建内容</a><!----></div><!--]--></div><div class=\\"t-anchor__item\\"><a href=\\"##anchor-target-6\\" title=\\"保密协议\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">保密协议</a><!----></div><div class=\\"t-anchor__item\\"><a href=\\"##anchor-target-7\\" title=\\"其他\\" class=\\"t-anchor__item-link\\" target=\\"_self\\">其他</a><!----></div><!--]--></div></div><!----><!--]--><!--]--></div>"`;
+6 −0		docs/web/api/anchor.en-US.md
+6 −0		docs/web/api/anchor.md
+8 −8		docs/web/api/chat-ai.md
+6 −0		docs/web/api/tree.en-US.md
+6 −0		docs/web/api/tree.md
+29 −3		js/date-picker/utils.ts
+15 −6		js/tree-v1/tree-node.ts
+14 −7		js/tree/tree-node.ts
+1 −1		package.json
+9 −1		style/mobile/components/collapse/v2/_index.less
+22 −4		style/web/components/chat/_index.less
+264 −18		test/unit/tree/lazy.test.js