forked from opentiny/tiny-vue
feat(anchor): 锚点组件增加固定模式，修复示例文档bug问题 (#49)
This commit is contained in:
chenxi-20
GitHub
parent
7407fd13c0
commit
d7bade3a60
|
|
@ -1,27 +1,12 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="basic-usage" class="basic-usage">Basic Usage</div>
|
||||
<div id="set-container" class="set-container">Set Container</div>
|
||||
<div id="event" class="event">
|
||||
Event
|
||||
<div id="on-change" class="on-change">On Change</div>
|
||||
<div id="link-click" class="link-click">Link Click</div>
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<tiny-anchor :links="links"></tiny-anchor>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-anchor :links="links"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Row, Col } from '@opentiny/vue'
|
||||
import { Anchor } from '@opentiny/vue'
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
TinyAnchor: Anchor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -31,6 +16,11 @@ export default {
|
|||
link: '#basic-usage',
|
||||
title: 'Basic Usage'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: 'Is Affix'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
|
|
@ -45,11 +35,6 @@ export default {
|
|||
key: 'on-change',
|
||||
link: '#on-change',
|
||||
title: 'On Change'
|
||||
},
|
||||
{
|
||||
key: 'link-click',
|
||||
link: '#link-click',
|
||||
title: 'Link Click'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -58,25 +43,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.basic-usage {
|
||||
height: 100vh;
|
||||
background: rgba(125, 0, 0, 0.1);
|
||||
}
|
||||
.set-container {
|
||||
height: 100vh;
|
||||
background: rgba(0, 125, 0, 0.1);
|
||||
}
|
||||
.event {
|
||||
background: rgba(0, 0, 125, 0.1);
|
||||
}
|
||||
.on-change {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.2);
|
||||
}
|
||||
.link-click {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<tiny-anchor :links="links" is-affix></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from '@opentiny/vue'
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: 'Basic Usage'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: 'Is Affix'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,27 +1,12 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="basic-usage" class="basic-usage">Basic Usage</div>
|
||||
<div id="set-container" class="set-container">Set Container</div>
|
||||
<div id="event" class="event">
|
||||
Event
|
||||
<div id="on-change" class="on-change">On Change</div>
|
||||
<div id="link-click" class="link-click">Link Click</div>
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Row, Col } from '@opentiny/vue'
|
||||
import { Anchor } from '@opentiny/vue'
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
TinyAnchor: Anchor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -31,6 +16,11 @@ export default {
|
|||
link: '#basic-usage',
|
||||
title: 'Basic Usage'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: 'Is Affix'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
|
|
@ -45,11 +35,6 @@ export default {
|
|||
key: 'on-change',
|
||||
link: '#on-change',
|
||||
title: 'On Change'
|
||||
},
|
||||
{
|
||||
key: 'link-click',
|
||||
link: '#link-click',
|
||||
title: 'Link Click'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -63,25 +48,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.basic-usage {
|
||||
height: 100vh;
|
||||
background: rgba(125, 0, 0, 0.1);
|
||||
}
|
||||
.set-container {
|
||||
height: 100vh;
|
||||
background: rgba(0, 125, 0, 0.1);
|
||||
}
|
||||
.event {
|
||||
background: rgba(0, 0, 125, 0.1);
|
||||
}
|
||||
.on-change {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.2);
|
||||
}
|
||||
.link-click {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="container" class="scroll-container">
|
||||
<div id="basic-usage" class="basic-usage">Basic Usage</div>
|
||||
<div id="set-container" class="set-container">Set Container</div>
|
||||
<div id="event" class="event">
|
||||
Event
|
||||
<div id="on-change" class="on-change">On Change</div>
|
||||
<div id="link-click" class="link-click">Link Click</div>
|
||||
<div id="section-1" class="section-1">Section 1</div>
|
||||
<div id="section-2" class="section-2">Section 2</div>
|
||||
<div id="section-3" class="section-3">
|
||||
Section 3
|
||||
<div id="section-3-1" class="section-3-1">Section 3-1</div>
|
||||
<div id="section-3-2" class="section-3-2">Section 3-2</div>
|
||||
</div>
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-anchor"></tiny-anchor>
|
||||
<tiny-anchor :links="links" containerId="#container" @linkClick="handleClick" mark-class="is-active-anchor"></tiny-anchor>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
|
@ -29,29 +29,29 @@ export default {
|
|||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: 'Basic Usage'
|
||||
key: 'section-1',
|
||||
link: '#section-1',
|
||||
title: 'Section 1'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
title: 'Set Container'
|
||||
key: 'section-2',
|
||||
link: '#section-2',
|
||||
title: 'Section 2'
|
||||
},
|
||||
{
|
||||
key: 'event',
|
||||
link: '#event',
|
||||
title: 'Event',
|
||||
key: 'section-3',
|
||||
link: '#section-3',
|
||||
title: 'Section 3',
|
||||
children: [
|
||||
{
|
||||
key: 'on-change',
|
||||
link: '#on-change',
|
||||
title: 'On Change'
|
||||
key: 'section-3-1',
|
||||
link: '#section-3-1',
|
||||
title: 'Section 3-1'
|
||||
},
|
||||
{
|
||||
key: 'link-click',
|
||||
link: '#link-click',
|
||||
title: 'Link Click'
|
||||
key: 'section-3-2',
|
||||
link: '#section-3-2',
|
||||
title: 'Section 3-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -68,30 +68,33 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.divide {
|
||||
height: 100px;
|
||||
}
|
||||
.is-active-anchor {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.scroll-container {
|
||||
height: 30vh;
|
||||
height: 20vh;
|
||||
border: 2px solid #333;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
.basic-usage {
|
||||
.section-1 {
|
||||
height: 100vh;
|
||||
background: rgba(125, 0, 0, 0.1);
|
||||
}
|
||||
.set-container {
|
||||
.section-2 {
|
||||
height: 100vh;
|
||||
background: rgba(0, 125, 0, 0.1);
|
||||
}
|
||||
.event {
|
||||
.section-3 {
|
||||
background: rgba(0, 0, 125, 0.1);
|
||||
}
|
||||
.on-change {
|
||||
.section-3-1 {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.2);
|
||||
}
|
||||
.link-click {
|
||||
.section-3-2 {
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 125, 0.3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<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/is-affix"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
<nova-attributes link="anchor"></nova-attributes>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
### 指定容器内滚动
|
||||
|
||||
指定容器 `containerId` 后，可以通过阻止a标签的默认事件，实现单页面`hash`路由模式的页面跳转
|
||||
还可以通过`maskClass`属性设置自定义类名，高亮显示滚动的目标元素
|
||||
还可以通过`maskClass`属性设置自定义类名，高亮显示滚动的目标元素；通过`linkClick`监听锚点点击事件
|
||||
|
||||
<nova-demo-view link="anchor/set-container"></nova-demo-view>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,10 @@
|
|||
"path": "/anchor/basic-usage",
|
||||
"name": "基本用法"
|
||||
},
|
||||
{
|
||||
"path": "/anchor/is-affix",
|
||||
"name": "固定模式"
|
||||
},
|
||||
{
|
||||
"path": "/anchor/set-container",
|
||||
"name": "滚动容器"
|
||||
|
|
|
|||
|
|
@ -121,6 +121,11 @@ const routers = [
|
|||
meta: { title: '导航组件-anchor 锚点-基本用法', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/basic-usage.md')
|
||||
},
|
||||
{
|
||||
path: 'anchor/is-affix',
|
||||
meta: { title: '导航组件-anchor 锚点-基本用法', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/is-affix.md')
|
||||
},
|
||||
{
|
||||
path: 'anchor/set-container',
|
||||
meta: { title: '导航组件-anchor 锚点-滚动容器', lang: 'zh-CN', sign: 'component' },
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { renderless, api } from '@opentiny/vue-renderless/anchor/vue'
|
|||
export default {
|
||||
name: $prefix + 'Anchor',
|
||||
props: {
|
||||
isAffix: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
links: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
|
|
@ -24,6 +28,7 @@ export default {
|
|||
},
|
||||
render() {
|
||||
const {
|
||||
isAffix,
|
||||
links,
|
||||
linkClick,
|
||||
state: { currentLink }
|
||||
|
|
@ -47,8 +52,8 @@ export default {
|
|||
))
|
||||
: null
|
||||
|
||||
return (
|
||||
<div class={`${anchorClass}__wrapper`}>
|
||||
return isAffix ? (
|
||||
<div class={`${anchorClass}__affix`} ref="fixRef">
|
||||
<div class={anchorClass} ref="anchorRef">
|
||||
<div class={`${anchorClass}-link-mask`} ref="maskRef"></div>
|
||||
<div class={`${anchorClass}-orbit`}>
|
||||
|
|
@ -57,6 +62,14 @@ export default {
|
|||
{links && renderLinks(links)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue