tangjinzhou
7 years ago
10 changed files with 476 additions and 1 deletions
@ -0,0 +1,251 @@ |
|||||||
|
import PropTypes from '../_util/vue-types' |
||||||
|
import classNames from 'classnames' |
||||||
|
import addEventListener from '../_util/Dom/addEventListener' |
||||||
|
import Affix from '../affix' |
||||||
|
import getScroll from '../_util/getScroll' |
||||||
|
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame' |
||||||
|
import { initDefaultProps, getClass, getStyle } from '../_util/props-util' |
||||||
|
import BaseMixin from '../_util/BaseMixin' |
||||||
|
|
||||||
|
function getDefaultContainer () { |
||||||
|
return window |
||||||
|
} |
||||||
|
|
||||||
|
function getOffsetTop (element, container) { |
||||||
|
if (!element) { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
|
||||||
|
if (!element.getClientRects().length) { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
|
||||||
|
const rect = element.getBoundingClientRect() |
||||||
|
|
||||||
|
if (rect.width || rect.height) { |
||||||
|
if (container === window) { |
||||||
|
container = element.ownerDocument.documentElement |
||||||
|
return rect.top - container.clientTop |
||||||
|
} |
||||||
|
return rect.top - container.getBoundingClientRect().top |
||||||
|
} |
||||||
|
|
||||||
|
return rect.top |
||||||
|
} |
||||||
|
|
||||||
|
function easeInOutCubic (t, b, c, d) { |
||||||
|
const cc = c - b |
||||||
|
t /= d / 2 |
||||||
|
if (t < 1) { |
||||||
|
return cc / 2 * t * t * t + b |
||||||
|
} |
||||||
|
return cc / 2 * ((t -= 2) * t * t + 2) + b |
||||||
|
} |
||||||
|
|
||||||
|
const reqAnimFrame = getRequestAnimationFrame() |
||||||
|
const sharpMatcherRegx = /#([^#]+)$/ |
||||||
|
function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) { |
||||||
|
const container = getContainer() |
||||||
|
const scrollTop = getScroll(container, true) |
||||||
|
const sharpLinkMatch = sharpMatcherRegx.exec(href) |
||||||
|
if (!sharpLinkMatch) { return } |
||||||
|
const targetElement = document.getElementById(sharpLinkMatch[1]) |
||||||
|
if (!targetElement) { |
||||||
|
return |
||||||
|
} |
||||||
|
const eleOffsetTop = getOffsetTop(targetElement, container) |
||||||
|
const targetScrollTop = scrollTop + eleOffsetTop - offsetTop |
||||||
|
const startTime = Date.now() |
||||||
|
const frameFunc = () => { |
||||||
|
const timestamp = Date.now() |
||||||
|
const time = timestamp - startTime |
||||||
|
const nextScrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450) |
||||||
|
if (container === window) { |
||||||
|
window.scrollTo(window.pageXOffset, nextScrollTop) |
||||||
|
} else { |
||||||
|
container.scrollTop = nextScrollTop |
||||||
|
} |
||||||
|
if (time < 450) { |
||||||
|
reqAnimFrame(frameFunc) |
||||||
|
} else { |
||||||
|
callback() |
||||||
|
} |
||||||
|
} |
||||||
|
reqAnimFrame(frameFunc) |
||||||
|
history.pushState(null, '', href) |
||||||
|
} |
||||||
|
|
||||||
|
export const AnchorProps = { |
||||||
|
prefixCls: PropTypes.string, |
||||||
|
offsetTop: PropTypes.number, |
||||||
|
bounds: PropTypes.number, |
||||||
|
affix: PropTypes.boolean, |
||||||
|
showInkInFixed: PropTypes.boolean, |
||||||
|
getContainer: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'AAnchor', |
||||||
|
mixins: [BaseMixin], |
||||||
|
inheritAttrs: false, |
||||||
|
props: initDefaultProps(AnchorProps, { |
||||||
|
prefixCls: 'ant-anchor', |
||||||
|
affix: true, |
||||||
|
showInkInFixed: false, |
||||||
|
getContainer: getDefaultContainer, |
||||||
|
}), |
||||||
|
|
||||||
|
data () { |
||||||
|
this.links = [] |
||||||
|
return { |
||||||
|
activeLink: null, |
||||||
|
} |
||||||
|
}, |
||||||
|
provide () { |
||||||
|
return { |
||||||
|
antAnchor: { |
||||||
|
registerLink: (link) => { |
||||||
|
if (!this.links.includes(link)) { |
||||||
|
this.links.push(link) |
||||||
|
} |
||||||
|
}, |
||||||
|
unregisterLink: (link) => { |
||||||
|
const index = this.links.indexOf(link) |
||||||
|
if (index !== -1) { |
||||||
|
this.links.splice(index, 1) |
||||||
|
} |
||||||
|
}, |
||||||
|
$data: this.$data, |
||||||
|
scrollTo: this.handleScrollTo, |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mount () { |
||||||
|
this.$nextTick(() => { |
||||||
|
const { getContainer } = this |
||||||
|
this.scrollEvent = addEventListener(getContainer(), 'scroll', this.handleScroll) |
||||||
|
this.handleScroll() |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy () { |
||||||
|
if (this.scrollEvent) { |
||||||
|
this.scrollEvent.remove() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
updated () { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.updateInk() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleScroll () { |
||||||
|
if (this.animating) { |
||||||
|
return |
||||||
|
} |
||||||
|
const { offsetTop, bounds } = this |
||||||
|
this.setState({ |
||||||
|
activeLink: this.getCurrentAnchor(offsetTop, bounds), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
handleScrollTo (link) { |
||||||
|
const { offsetTop, getContainer } = this |
||||||
|
this.animating = true |
||||||
|
this.setState({ activeLink: link }) |
||||||
|
scrollTo(link, offsetTop, getContainer, () => { |
||||||
|
this.animating = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
getCurrentAnchor (offsetTop = 0, bounds = 5) { |
||||||
|
const activeLink = '' |
||||||
|
if (typeof document === 'undefined') { |
||||||
|
return activeLink |
||||||
|
} |
||||||
|
|
||||||
|
const linkSections = [] |
||||||
|
const { getContainer } = this |
||||||
|
const container = getContainer() |
||||||
|
this.links.forEach(link => { |
||||||
|
const sharpLinkMatch = sharpMatcherRegx.exec(link.toString()) |
||||||
|
if (!sharpLinkMatch) { return } |
||||||
|
const target = document.getElementById(sharpLinkMatch[1]) |
||||||
|
if (target) { |
||||||
|
const top = getOffsetTop(target, container) |
||||||
|
if (top < offsetTop + bounds) { |
||||||
|
linkSections.push({ |
||||||
|
link, |
||||||
|
top, |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
if (linkSections.length) { |
||||||
|
const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev) |
||||||
|
return maxSection.link |
||||||
|
} |
||||||
|
return '' |
||||||
|
}, |
||||||
|
|
||||||
|
updateInk () { |
||||||
|
if (typeof document === 'undefined') { |
||||||
|
return |
||||||
|
} |
||||||
|
const { prefixCls } = this |
||||||
|
const linkNode = this.$el.getElementsByClassName(`${prefixCls}-link-title-active`)[0] |
||||||
|
if (linkNode) { |
||||||
|
this.$refs.linkNode.style.top = `${(linkNode).offsetTop + linkNode.clientHeight / 2 - 4.5}px` |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
prefixCls, |
||||||
|
offsetTop, |
||||||
|
affix, |
||||||
|
showInkInFixed, |
||||||
|
activeLink, |
||||||
|
$slots, |
||||||
|
} = this |
||||||
|
|
||||||
|
const inkClass = classNames(`${prefixCls}-ink-ball`, { |
||||||
|
visible: activeLink, |
||||||
|
}) |
||||||
|
|
||||||
|
const wrapperClass = classNames(getClass(this), `${prefixCls}-wrapper`) |
||||||
|
|
||||||
|
const anchorClass = classNames(prefixCls, { |
||||||
|
'fixed': !affix && !showInkInFixed, |
||||||
|
}) |
||||||
|
|
||||||
|
const wrapperStyle = { |
||||||
|
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh', |
||||||
|
...getStyle(this, true), |
||||||
|
} |
||||||
|
|
||||||
|
const anchorContent = ( |
||||||
|
<div |
||||||
|
class={wrapperClass} |
||||||
|
style={wrapperStyle} |
||||||
|
> |
||||||
|
<div class={anchorClass}> |
||||||
|
<div class={`${prefixCls}-ink`} > |
||||||
|
<span class={inkClass} ref='linkNode' /> |
||||||
|
</div> |
||||||
|
{$slots.default} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
return !affix ? anchorContent : ( |
||||||
|
<Affix offsetTop={offsetTop}> |
||||||
|
{anchorContent} |
||||||
|
</Affix> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import PropTypes from '../_util/vue-types' |
||||||
|
import { initDefaultProps, getComponentFromProp } from '../_util/props-util' |
||||||
|
import classNames from 'classnames' |
||||||
|
|
||||||
|
export const AnchorLinkProps = { |
||||||
|
prefixCls: PropTypes.string, |
||||||
|
href: PropTypes.string, |
||||||
|
title: PropTypes.any, |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'AAnchorLink', |
||||||
|
props: initDefaultProps(AnchorLinkProps, { |
||||||
|
prefixCls: 'ant-anchor', |
||||||
|
href: '#', |
||||||
|
}), |
||||||
|
inject: { |
||||||
|
antAnchor: { default: {}}, |
||||||
|
}, |
||||||
|
|
||||||
|
mounted () { |
||||||
|
this.antAnchor.registerLink(this.href) |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy () { |
||||||
|
this.antAnchor.unregisterLink(this.href) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClick () { |
||||||
|
this.antAnchor.scrollTo(this.href) |
||||||
|
}, |
||||||
|
}, |
||||||
|
render () { |
||||||
|
const { |
||||||
|
prefixCls, |
||||||
|
href, |
||||||
|
$slots, |
||||||
|
} = this |
||||||
|
const title = getComponentFromProp(this, 'title') |
||||||
|
const active = this.antAnchor.$data.activeLink === href |
||||||
|
const wrapperClassName = classNames(`${prefixCls}-link`, { |
||||||
|
[`${prefixCls}-link-active`]: active, |
||||||
|
}) |
||||||
|
const titleClassName = classNames(`${prefixCls}-link-title`, { |
||||||
|
[`${prefixCls}-link-title-active`]: active, |
||||||
|
}) |
||||||
|
return ( |
||||||
|
<div class={wrapperClassName}> |
||||||
|
<a |
||||||
|
class={titleClassName} |
||||||
|
href={href} |
||||||
|
title={typeof title === 'string' ? title : ''} |
||||||
|
onClick={this.handleClick} |
||||||
|
> |
||||||
|
{title} |
||||||
|
</a> |
||||||
|
{$slots.default} |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import demoTest from '../../../tests/shared/demoTest' |
||||||
|
|
||||||
|
demoTest('anchor') |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
--- |
||||||
|
category: Components |
||||||
|
type: Other |
||||||
|
cols: 2 |
||||||
|
title: Anchor |
||||||
|
--- |
||||||
|
|
||||||
|
Hyperlinks to scroll on one page. |
||||||
|
|
||||||
|
## When To Use |
||||||
|
|
||||||
|
For displaying anchor hyperlinks on page and jumping between them. |
||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
### Anchor Props |
||||||
|
|
||||||
|
| Property | Description | Type | Default | |
||||||
|
| -------- | ----------- | ---- | ------- | |
||||||
|
| affix | Fixed mode of Anchor | boolean | true | |
||||||
|
| bounds | Bounding distance of anchor area | number | 5(px) | |
||||||
|
| getContainer | Scrolling container | () => HTMLElement | () => window | |
||||||
|
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
||||||
|
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
||||||
|
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | |
||||||
|
|
||||||
|
### Link Props |
||||||
|
|
||||||
|
| Property | Description | Type | Default | |
||||||
|
| -------- | ----------- | ---- | ------- | |
||||||
|
| href | target of hyperlink | string | | |
||||||
|
| title | content of hyperlink | string\|slot | | |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import Anchor from './Anchor' |
||||||
|
import AnchorLink from './AnchorLink' |
||||||
|
|
||||||
|
export { AnchorProps } from './Anchor' |
||||||
|
export { AnchorLinkProps } from './AnchorLink' |
||||||
|
|
||||||
|
Anchor.Link = AnchorLink |
||||||
|
export default Anchor |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
--- |
||||||
|
category: Components |
||||||
|
subtitle: 锚点 |
||||||
|
cols: 2 |
||||||
|
type: Other |
||||||
|
title: Anchor |
||||||
|
--- |
||||||
|
|
||||||
|
用于跳转到页面指定位置。 |
||||||
|
|
||||||
|
## 何时使用 |
||||||
|
|
||||||
|
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。 |
||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
### Anchor Props |
||||||
|
|
||||||
|
| 成员 | 说明 | 类型 | 默认值 | |
||||||
|
| --- | --- | --- | --- | |
||||||
|
| affix | 固定模式 | boolean | true | |
||||||
|
| bounds | 锚点区域边界 | number | 5(px) | |
||||||
|
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
||||||
|
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
||||||
|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
||||||
|
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | |
||||||
|
|
||||||
|
### Link Props |
||||||
|
|
||||||
|
| 成员 | 说明 | 类型 | 默认值 | |
||||||
|
| --- | --- | --- | --- | |
||||||
|
| href | 锚点链接 | string | | |
||||||
|
| title | 文字内容 | string\|slot | | |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import '../../style/index.less' |
||||||
|
import './index.less' |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
@import "../../style/themes/default"; |
||||||
|
@import "../../style/mixins/index"; |
||||||
|
|
||||||
|
@anchor-border-width: 2px; |
||||||
|
|
||||||
|
.@{ant-prefix}-anchor { |
||||||
|
.reset-component; |
||||||
|
position: relative; |
||||||
|
padding-left: @anchor-border-width; |
||||||
|
|
||||||
|
&-wrapper { |
||||||
|
background-color: @component-background; |
||||||
|
overflow: auto; |
||||||
|
padding-left: 4px; |
||||||
|
margin-left: -4px; |
||||||
|
} |
||||||
|
|
||||||
|
&-ink { |
||||||
|
position: absolute; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
&:before { |
||||||
|
content: ' '; |
||||||
|
position: relative; |
||||||
|
width: @anchor-border-width; |
||||||
|
height: 100%; |
||||||
|
display: block; |
||||||
|
background-color: @border-color-split; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
&-ball { |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 8px; |
||||||
|
border: 2px solid @primary-color; |
||||||
|
background-color: @component-background; |
||||||
|
left: 50%; |
||||||
|
transition: top .3s ease-in-out; |
||||||
|
transform: translateX(-50%); |
||||||
|
&.visible { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.fixed &-ink &-ink-ball { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&-link { |
||||||
|
padding: 8px 0 8px 16px; |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
&-title { |
||||||
|
display: block; |
||||||
|
position: relative; |
||||||
|
transition: all .3s; |
||||||
|
color: @text-color; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
margin-bottom: 8px; |
||||||
|
|
||||||
|
&:only-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-active > &-title { |
||||||
|
color: @primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-link &-link { |
||||||
|
padding-top: 6px; |
||||||
|
padding-bottom: 6px; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue