feat: add anchor component docs & test
tangjinzhou
parent
018cc4fa0a
commit
a1448e06d9
|
|
@ -79,8 +79,8 @@ export const AnchorProps = {
|
|||
prefixCls: PropTypes.string,
|
||||
offsetTop: PropTypes.number,
|
||||
bounds: PropTypes.number,
|
||||
affix: PropTypes.boolean,
|
||||
showInkInFixed: PropTypes.boolean,
|
||||
affix: PropTypes.bool,
|
||||
showInkInFixed: PropTypes.bool,
|
||||
getContainer: PropTypes.func,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
import { mount } from '@vue/test-utils'
|
||||
import Vue from 'vue'
|
||||
import Anchor from '..'
|
||||
|
||||
const { Link } = Anchor
|
||||
|
||||
describe('Anchor Render', () => {
|
||||
it('Anchor render perfectly', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Anchor ref='anchor'>
|
||||
<Link href='#API' title='API' />
|
||||
</Anchor>
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
wrapper.find('a[href="#API"]').trigger('click')
|
||||
wrapper.vm.$refs.anchor.handleScroll()
|
||||
expect(wrapper.vm.$refs.anchor.$data.activeLink).not.toBe(null)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('Anchor render perfectly for complete href - click', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Anchor ref='anchor'>
|
||||
<Link href='http://www.example.com/#API' title='API' />
|
||||
</Anchor>
|
||||
)
|
||||
},
|
||||
}, { sync: false })
|
||||
Vue.nextTick(() => {
|
||||
wrapper.find('a[href="http://www.example.com/#API"]').trigger('click')
|
||||
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API')
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('Anchor render perfectly for complete href - scoll', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<div id='API'>Hello</div>
|
||||
<Anchor ref='anchor'>
|
||||
<Link href='http://www.example.com/#API' title='API' />
|
||||
</Anchor>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}, { sync: false, attachToDocument: true })
|
||||
Vue.nextTick(() => {
|
||||
wrapper.vm.$refs.anchor.handleScroll()
|
||||
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API')
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('Anchor render perfectly for complete href - scollTo', (done) => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<div id='API'>Hello</div>
|
||||
<Anchor ref='anchor'>
|
||||
<Link href='##API' title='API' />
|
||||
</Anchor>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}, { sync: false, attachToDocument: true })
|
||||
Vue.nextTick(() => {
|
||||
wrapper.vm.$refs.anchor.handleScrollTo('##API')
|
||||
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##API')
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="">
|
||||
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
|
||||
<div class="ant-anchor">
|
||||
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#API" title="API" class="ant-anchor-link-title">API</a>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
|
||||
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
|
||||
<div class="ant-anchor fixed">
|
||||
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#API" title="API" class="ant-anchor-link-title">API</a>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a>
|
||||
</div>
|
||||
<div class="ant-anchor-link">
|
||||
<a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<cn>
|
||||
#### 基本
|
||||
最简单的用法。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### basic
|
||||
The simplest usage.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-anchor>
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
import Basic from './basic'
|
||||
import Static from './static'
|
||||
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
const md = {
|
||||
cn: `# Anchor 锚点
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
## 代码演示`,
|
||||
us: `# Anchor
|
||||
|
||||
Hyperlinks to scroll on one page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
subtitle: '锚点',
|
||||
cols: 2,
|
||||
type: 'Other',
|
||||
title: 'Anchor',
|
||||
render () {
|
||||
return (
|
||||
<div id='components-anchor-demo'>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Basic/>
|
||||
<Static/>
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#components-anchor-demo .ant-affix {
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<cn>
|
||||
#### 静态位置
|
||||
不浮动，状态不随页面滚动变化。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Static Anchor
|
||||
Do not change state when page is scrolling.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-anchor :affix="false">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -1,15 +1,3 @@
|
|||
---
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,3 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 锚点
|
||||
cols: 2
|
||||
type: Other
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
## API
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Vue from 'vue'
|
||||
import {
|
||||
Affix,
|
||||
// Anchor,
|
||||
Anchor,
|
||||
AutoComplete,
|
||||
Alert,
|
||||
Avatar,
|
||||
|
|
@ -57,6 +57,8 @@ import {
|
|||
} from 'antd'
|
||||
|
||||
Vue.component(Affix.name, Affix) // a-affix
|
||||
Vue.component(Anchor.name, Anchor)
|
||||
Vue.component(Anchor.Link.name, Anchor.Link)
|
||||
Vue.component(AutoComplete.name, AutoComplete)
|
||||
Vue.component(Alert.name, Alert)
|
||||
Vue.component(Avatar.name, Avatar)
|
||||
|
|
|
|||
|
|
@ -45,3 +45,4 @@ export { default as upload } from 'antd/upload/demo/index.vue'
|
|||
export { default as tree } from 'antd/tree/demo/index.vue'
|
||||
export { default as layout } from 'antd/layout/demo/index.vue'
|
||||
export { default as form } from 'antd/form/demo/index.vue'
|
||||
export { default as anchor } from 'antd/anchor/demo/index.vue'
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ Array [
|
|||
"message",
|
||||
"notification",
|
||||
"Affix",
|
||||
"Anchor",
|
||||
"AutoComplete",
|
||||
"Alert",
|
||||
"Avatar",
|
||||
|
|
|
|||
Loading…
Reference in New Issue