forked from opentiny/tiny-vue
feat(anchor): 添加锚点anchor组件onchange事件 (#35)
* feat(anchor): 新增anchor组件第一个功能：基本使用 * feat(anchor): 修改anchor组件讨论意见，增加container api和maskClass类名 * fix(anchor): 修复anchor组件MD文档说明 * feat(anchor): 添加锚点anchor组件onchange事件 * fix(anchor): 修复review意见，取消行内样式
This commit is contained in:
chenxi-20
GitHub
parent
c43fb95f08
commit
28cc92d570
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="basic-usage" style="height: 100vh; background: rgba(125, 0, 0, 0.1)">Basic Usage</div>
|
||||
<div id="set-container" style="height: 100vh; background: rgba(0, 125, 0, 0.1)">Set Container</div>
|
||||
<div id="event" style="background: rgba(0, 0, 125, 0.1)">
|
||||
<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" style="height: 100vh; background: rgba(0, 0, 125, 0.2)">On Change</div>
|
||||
<div id="link-click" style="height: 100vh; background: rgba(0, 0, 125, 0.3)">Link Click</div>
|
||||
<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">
|
||||
|
|
@ -58,3 +58,25 @@ 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,87 @@
|
|||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Row, Col } from '@opentiny/vue'
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: 'Basic Usage'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
key: 'link-click',
|
||||
link: '#link-click',
|
||||
title: 'Link Click'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(link) {
|
||||
console.log('change', link)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="container" style="height: 30vh; border: 2px solid #333; overflow: auto">
|
||||
<div id="basic-usage" style="height: 100vh; background: rgba(125, 0, 0, 0.1)">Basic Usage</div>
|
||||
<div id="set-container" style="height: 100vh; background: rgba(0, 125, 0, 0.1)">Set Container</div>
|
||||
<div id="event" style="background: rgba(0, 0, 125, 0.1)">
|
||||
<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" style="height: 100vh; background: rgba(0, 0, 125, 0.2)">On Change</div>
|
||||
<div id="link-click" style="height: 100vh; background: rgba(0, 0, 125, 0.3)">Link Click</div>
|
||||
<div id="on-change" class="on-change">On Change</div>
|
||||
<div id="link-click" class="link-click">Link Click</div>
|
||||
</div>
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-content"></tiny-anchor>
|
||||
<tiny-anchor :links="links" containerId="#container" @link-click="handleClick" mark-class="is-active-anchor"></tiny-anchor>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
|
@ -67,8 +67,32 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.is-active-content {
|
||||
<style scoped>
|
||||
.is-active-anchor {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.scroll-container {
|
||||
height: 30vh;
|
||||
border: 2px solid #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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,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/on-change"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
<nova-attributes link="anchor"></nova-attributes>
|
||||
|
|
@ -49,6 +49,10 @@
|
|||
{
|
||||
"path": "/anchor/set-container",
|
||||
"name": "滚动容器"
|
||||
},
|
||||
{
|
||||
"path": "/anchor/on-change",
|
||||
"name": "onChange事件"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -126,6 +126,11 @@ const routers = [
|
|||
meta: { title: '导航组件-anchor 锚点-滚动容器', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/set-container.md')
|
||||
},
|
||||
{
|
||||
path: 'anchor/on-change',
|
||||
meta: { title: '导航组件-anchor 锚点-onChange事件', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-anchor' */ './docs/zh-CN/anchor/on-change.md')
|
||||
},
|
||||
{
|
||||
path: 'breadcrumb',
|
||||
meta: { title: '导航组件-Breadcrumb 面包屑', lang: 'zh-CN', sign: 'component' },
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['linkClick'],
|
||||
emits: ['linkClick', 'onChange'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue