Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0df29e3
feat(anchor-item): 新增API(disableScroll)，支持禁用滚动控制
boogie-ben Jul 9, 2024
fe5dd26
Merge branch 'Tencent:develop' into feat/anchor-item
boogie-ben Nov 17, 2024
7bf8c4c
feat(anchor-item): 新增api customScroll 支持用户使用自定义的锚点滚动效果
boogie-ben Nov 17, 2024
e9ab01c
feat(anchor): 新增demo自定义滚动效果
boogie-ben Nov 17, 2024
ba5dea1
chore: update common
github-actions[bot] Nov 19, 2024
0dc145d
chore: merge develop
github-actions[bot] Nov 19, 2024
75dbba5
chore: update snapshot
github-actions[bot] Nov 19, 2024
37480e9
chore: fix lint
uyarn Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 12 files
+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
19 changes: 19 additions & 0 deletions src/anchor/_example-ts/custom-scroll.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions src/anchor/_example/custom-scroll.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 5 additions & 0 deletions src/anchor/anchor-item-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,9 @@ export default {
type: [String, Function] as PropType<TdAnchorItemProps['title']>,
default: '',
},
/** 自定义滚动效果，为true时点击锚点链接后不会使用js动画平滑滚动到锚点目标元素 */
customScroll: {
type: Boolean,
default: false,
},
};
2 changes: 1 addition & 1 deletion src/anchor/anchor-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
1 change: 1 addition & 0 deletions src/anchor/anchor.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions src/anchor/anchor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 5 additions & 0 deletions src/anchor/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,9 @@ export interface TdAnchorItemProps {
* @default ''
*/
title?: string | TNode;
/**
* 自定义滚动效果，为true时点击锚点链接后不会使用js动画平滑滚动到锚点目标元素
* @default false
*/
customScroll?: boolean;
}
2 changes: 2 additions & 0 deletions src/date-picker/hooks/useTableData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
102 changes: 102 additions & 0 deletions test/unit/snap/__snapshots__/csr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions test/unit/snap/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"`;
Expand Down
Loading